如何在DataTables Ajax重载后保留HTML表格样式及onclick属性？

这个问题我之前也碰到过，核心原因其实很好理解：Thymeleaf是服务器端渲染引擎，而DataTables的Ajax.reload是前端直接生成DOM元素，两者完全不在一个环节。Thymeleaf的th:onclick、动态class这些都是在服务器把模板转成HTML时才会生效，前端新渲染的行根本没经过Thymeleaf处理，自然就丢失了这些属性。

下面给你两个实用的解决方案，一步步来：

1. 用事件委托替代Thymeleaf的th:onclick #

动态生成的DOM元素没法直接绑定点击事件，所以我们用事件委托——把事件绑定到父元素（比如表格的tbody）上，不管后续怎么刷新行，点击事件都能触发。

首先把HTML里的th:onclick去掉，保留基础表格结构：

<table class="table table-hover" id="main-table">
  <thead class="thead-inverse">
    <tr>
      <th class="col-md-2 text-center">你的列标题</th>
      <!-- 其他表头列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 初始数据由Thymeleaf渲染，后续Ajax加载的内容会替换这里 -->
  </tbody>
</table>

然后写JS代码绑定事件：

// 给tbody绑定点击事件，监听里面的tr
$('#main-table tbody').on('click', 'tr', function() {
  // 获取当前行的DataTables数据
  var rowData = $('#main-table').DataTable().row(this).data();
  // 这里写你原来th:onclick里的逻辑，比如跳转到详情页
  // 比如原来的th:onclick="viewDetail(${item.id})"，现在改成：
  viewDetail(rowData.id);
});

这样不管表格怎么reload，新生成的行点击都会触发这个函数。

2. 让DataTables渲染时自动添加样式 #

如果你的样式是Thymeleaf动态添加的（比如根据数据状态加不同class），可以在DataTables的配置里用columns.className或者createdRow回调来处理：

$('#main-table').DataTable({
  ajax: {
    url: '/你的JSON接口地址',
    dataSrc: '' // 根据你的JSON结构调整，比如如果是数组就留空
  },
  columns: [
    // 直接给列指定固定class
    { data: 'columnName', className: 'col-md-2 text-center' },
    // 其他列配置
  ],
  createdRow: function(row, data, index) {
    // 这里可以根据数据动态给行加class，比如：
    if (data.status === 'active') {
      $(row).addClass('table-success');
    }
    // 也可以给行加自定义属性，方便后续获取数据
    $(row).attr('data-id', data.id);
  }
});

总结一下 #

别再让Thymeleaf管前端动态交互和样式了，服务器端只负责渲染初始数据，后续的动态内容（包括样式、事件）都交给前端JS和DataTables的回调来处理，这样就不会出现重载后属性丢失的问题了。

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