Datatables服务端模式：如何为tbody的tr添加自定义参数与点击事件

服务端模式下，Ajax的data选项是用来向服务端发送请求参数的，不是用来设置前端行元素的，所以你之前的方向错了。要给生成的tr加自定义参数和点击事件，得用Datatables提供的行渲染回调函数，常用的有createdRow和rowCallback：

方法一：使用createdRow回调（推荐，行创建完成后触发） #

这个回调会在tbody的tr元素被创建并添加到DOM后触发，适合给行添加自定义属性、绑定事件：

$(document).ready(function() {
  $('#xxx').DataTable({
    "serverSide": true,
    "ajax": "ss_ajax.cgi",
    "deferRender": true,
    // 新增createdRow回调
    "createdRow": function(row, data, dataIndex) {
      // 1. 添加自定义参数（比如给tr加data-id属性，值从服务端返回的data里取）
      $(row).attr('data-id', data.id); // 假设服务端返回的每条数据里有id字段
      $(row).attr('data-custom', data.customField); // 自定义字段同理

      // 2. 绑定onclick点击事件
      $(row).on('click', function() {
        // 点击后可以获取当前行的数据
        console.log('点击了行，数据：', data);
        // 这里写你的点击逻辑，比如跳转到详情页、弹窗等
        alert('点击了ID为' + data.id + '的行');
      });
    }
  });
});

方法二：使用rowCallback回调（行渲染时触发） #

这个回调会在每行数据被渲染时触发，也可以实现同样的效果：

$(document).ready(function() {
  $('#xxx').DataTable({
    "serverSide": true,
    "ajax": "ss_ajax.cgi",
    "deferRender": true,
    // 新增rowCallback回调
    "rowCallback": function(row, data, index) {
      // 添加自定义属性
      $(row).attr('data-id', data.id);
      // 绑定点击事件
      $(row).click(function() {
        console.log('行数据：', data);
      });
    }
  });
});

注意事项 #

• 服务端返回的JSON数据里，每条记录需要包含你要用到的自定义字段（比如id、customField），这样前端才能从data参数里拿到对应值。
• 如果需要给行添加样式，也可以在这两个回调里用$(row).addClass('your-class')实现。
• 优先用Datatables自带的回调，比全局事件委托更贴合组件生命周期，避免不必要的问题。

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