在数据表的columnDefs选项中写入时，Thymeleaf链接不会被解析

Question

在数据表的

columnDefs

选项中，我想用

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>

那么有什么问题吗？

Answer 1

Thymeleaf 通常不解析标签内的属性。而且它绝对不允许您在 Thymeleaf 表达式中使用 JavaScript 变量（如

const id = row[0];

），就像您在这里所做的那样：

th:href="@{/grilletarif/view/{id} (id='+id+')}"

（Thymeleaf 对 JavaScript 一无所知，并且在这段代码时已经运行了）执行）。

如果您想创建此链接，则需要使用 JavaScript 内联。例如这样的事情：

<script th:inline="javascript">
  const url = /*[[@{/grilletarif/view/}]]*/ "";
  
  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 href="' + url + 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>';
      }
    }],
    ...
});
</script>