Thymeleaf链接在DataTables的columnDefs配置中无法解析求助

问题场景 #

在DataTables的columnDefs配置里尝试用Thymeleaf语法渲染跳转链接，但页面最终显示的是未解析的原始Thymeleaf表达式，代码示例如下：

datatable = table.DataTable({
    ...,
    columnDefs: [
        {
            targets: [4],
            orderable: false,
            searchable: false,
            render: function(data, type, row, meta) {
                const id = row[0];
                return '<div style="display: flex; align-items: center;">'+ 
                            '<div class="col-sm-3"></div>'+ 
                            '<a th:href="@{/grilletarif/view/{id} (id='+id+')}">voir</a>'+ 
                            '<div class="col-sm-3"></div>'+ 
                            '<img class="icone_row_action" src="icones/delete.png" onclick="javascript:delete('+id+');" />'+ 
                            '<div class="col-sm-3"></div>'+ 
                        '</div>';
            }
        }

    ],
    ...
});

页面元素检查结果：<a th:href="@{/grilletarif/view/{id} (id=01)}">voir</a>，Thymeleaf表达式完全没有被解析。

核心原因 #

• Thymeleaf是服务器端模板引擎，仅在页面首次从服务器加载时解析渲染HTML内容，之后不会再处理客户端动态生成的HTML。
• DataTables的render函数是在客户端浏览器中运行的，它生成的HTML字符串只会被浏览器当作普通HTML解析，无法触发服务器端的Thymeleaf解析逻辑，所以th:href这类Thymeleaf指令会原封不动保留在DOM中。

解决办法 #

方法一：直接构造客户端可识别的URL #

放弃在客户端使用Thymeleaf语法，直接拼接完整的跳转路径：

datatable = table.DataTable({
    ...,
    columnDefs: [
        {
            targets: [4],
            orderable: false,
            searchable: false,
            render: function(data, type, row, meta) {
                const id = row[0];
                // 直接拼接目标URL
                const viewUrl = '/grilletarif/view/' + id;
                return '<div style="display: flex; align-items: center;">'+ 
                            '<div class="col-sm-3"></div>'+ 
                            '<a href="' + viewUrl + '">voir</a>'+ 
                            '<div class="col-sm-3"></div>'+ 
                            '<img class="icone_row_action" src="icones/delete.png" onclick="javascript:delete('+id+');" />'+ 
                            '<div class="col-sm-3"></div>'+ 
                        '</div>';
            }
        }

    ],
    ...
});

方法二：提前注入服务器端生成的基础路径（适配上下文） #

如果应用部署在非根路径下（比如/my-app），直接拼接路径会出错，可以先通过Thymeleaf在页面加载时注入基础URL：

1. 在HTML页面中添加：

<script th:inline="javascript">
    // 由Thymeleaf解析生成应用根路径
    const baseUrl = /*[[@{/}]]*/ '';
</script>

2. 在DataTables的render函数中使用该基础路径：

datatable = table.DataTable({
    ...,
    columnDefs: [
        {
            targets: [4],
            orderable: false,
            searchable: false,
            render: function(data, type, row, meta) {
                const id = row[0];
                const viewUrl = baseUrl + 'grilletarif/view/' + id;
                return '<div style="display: flex; align-items: center;">'+ 
                            '<div class="col-sm-3"></div>'+ 
                            '<a href="' + viewUrl + '">voir</a>'+ 
                            '<div class="col-sm-3"></div>'+ 
                            '<img class="icone_row_action" src="icones/delete.png" onclick="javascript:delete('+id+');" />'+ 
                            '<div class="col-sm-3"></div>'+ 
                        '</div>';
            }
        }

    ],
    ...
});

方法三：服务器端预渲染表格内容（仅适用于小数据量） #

如果一定要用Thymeleaf渲染每一行内容，可以在服务器端生成完整的表格HTML，再初始化DataTables。但这种方式会丧失DataTables异步加载、分页的优势，仅适合数据量较小的场景。

内容的提问来源于stack exchange，提问作者pheromix