如何解决jQuery DataTable中Thymeleaf th:href="@{}"不被识别问题

这个问题的核心原因很明确：Thymeleaf的th:href是服务器端渲染语法，它只会在页面首次加载时由服务器解析处理；而你在DataTable的render函数里生成的HTML是在浏览器端动态创建的，这时候Thymeleaf已经完成了页面渲染工作，自然不会再解析这些后续生成的th:href属性。

给你两种可靠的解决方案：

方案1：提前用Thymeleaf生成URL模板，前端替换占位符 #

先在页面的<script>标签里用Thymeleaf的内联语法生成编辑页面的URL模板，这样能自动处理应用的上下文路径（避免硬编码路径导致的问题）：

<script th:inline="javascript">
    // Thymeleaf会在服务器端把[[@{/category/{id}/edit}]]替换成正确的URL模板
    const editCategoryTemplate = /*[[@{/category/{id}/edit}]]*/ '';
</script>

然后在DataTable的render函数里，把模板中的{id}替换成实际的分类ID：

$("#categoriesTable").DataTable({
    "Processing": true,
    "ServerSide": true,
    "ajax": {"url": "/ajax/categories", "dataSrc": ""},
    "columns": [
        {"data": "id"},
        {"data": "name"},
        {"data": "description"},
        {"data": "create_at"},
        {
            "data": null,
            "render": function(data, type, row){
                // 替换模板中的ID占位符
                const editUrl = editCategoryTemplate.replace('{id}', data.id);
                return `<a class="btn btn-primary btn-xs" href="${editUrl}">Edit</a>`;
            },
            "targets": -1
        }
    ]
});

方案2：直接拼接相对路径（适合无上下文路径的简单场景） #

如果你的应用没有额外的上下文路径，也可以直接在前端拼接完整的相对路径，不过这种方式不够灵活，当应用部署路径变化时需要修改代码：

$("#categoriesTable").DataTable({
    "Processing": true,
    "ServerSide": true,
    "ajax": {"url": "/ajax/categories", "dataSrc": ""},
    "columns": [
        {"data": "id"},
        {"data": "name"},
        {"data": "description"},
        {"data": "create_at"},
        {
            "data": null,
            "render": function(data, type, row){
                return `<a class="btn btn-primary btn-xs" href="/category/${data.id}/edit">Edit</a>`;
            },
            "targets": -1
        }
    ]
});

推荐优先使用方案1，因为它能利用Thymeleaf的路径处理能力，避免手动维护路径带来的问题。

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