如何向DataTables表格动态追加行并恢复行重排功能？

我尝试向DataTable动态添加<tr/>标签，但没找到完善的“添加TR流程”文档。我的DataTables配置如下：

$("#Grid").DataTable({ 
  stateSave: true, 
  fixedHeader: true, 
  rowReorder: true, 
  columnDefs: [ 
    { orderable: false, className: "seq-cell", targets: 0 }, 
    { orderable: false, targets: "_all" } 
  ] 
}) 
.on("row-reordered", function (e, diff, edit) { 
  for (var i = 0; i < diff.length; i++) { 
    // 处理重排逻辑
  } 
});

我通过jQuery AJAX从MVC动作方法获取表格行的HTML字符串：

$.ajax({ 
  type: "post", 
  url: "AddItem", 
  data: $("#newitemform").find(":input[name]").serialize(), 
  success: function (d) { 
    var $body = $("#Grid tbody"); 
    $body.append(d); 
  } 
});

参数d是行的HTML代码，我将其追加到tbody中，行能成功添加，但新行不具备行重排功能。请问向DataTable追加行的正确方式是什么，以及如何重新启用相关功能？

嘿，这个问题我之前也踩过坑！直接用jQuery的append()操作DOM是行不通的——因为DataTables维护着自己独立的内部数据模型和DOM状态，你绕过它的API直接修改页面元素，DataTable完全不知道有新行被添加了，自然不会给新行绑定行重排的事件和样式。

正确的做法是用DataTables官方提供的API来添加行，具体步骤如下：

1. 先保存DataTable实例
   建议在初始化表格的时候就把实例存起来，这样后续调用API会更方便：

   // 初始化时把表格实例赋值给变量
   var gridTable = $("#Grid").DataTable({ 
     stateSave: true, 
     fixedHeader: true, 
     rowReorder: true, 
     columnDefs: [ 
       { orderable: false, className: "seq-cell", targets: 0 }, 
       { orderable: false, targets: "_all" } 
     ] 
   }) 
   .on("row-reordered", function (e, diff, edit) { 
     for (var i = 0; i < diff.length; i++) { 
       // 你的重排处理逻辑
     } 
   });
   

2. 修改AJAX回调，用API添加行
   既然后端返回的是完整的HTML行字符串，我们可以用row.add()方法把它加入DataTable的内部数据，然后调用draw()让表格更新：

   $.ajax({ 
     type: "post", 
     url: "AddItem", 
     data: $("#newitemform").find(":input[name]").serialize(), 
     success: function (d) { 
       // 把HTML字符串转成jQuery对象，用API添加行
       gridTable.row.add($(d)).draw();
     } 
   });
   

   这里的row.add()会把新行纳入DataTable的管理体系，draw()则会重新渲染表格，同时自动给新行绑定行重排的所有事件和样式。

3. 几个小提醒

   • 确保后端返回的HTML行里包含你配置的seq-cell类名，这个类是行重排手柄的标识，没有它的话重排功能可能没法正常触发。
   • 如果不想重置当前的分页、排序状态，可以用draw(false)代替draw()，这样只会插入新行而不打乱现有视图。

这样操作之后，新添加的行就会和原有行一样拥有行重排功能啦！

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