将行附加到 DataTables 网格

Question

我正在尝试将 <tr/> 标签动态添加到 DataTable，但我没有找到关于“添加 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；我把它附加到身体上。这会正确添加，但没有启用行重新排序功能。追加到 DataTable，然后重新启用任何功能的正确方法是什么？

Answer 1

使用row.add() API 方法添加新行而不是追加到表体。

如果d 包含以下格式的字符串<tr>...</tr>，您可以使用$("#Grid").DataTable().row.add($(d).get(0)) 添加新行。

例如：

$.ajax({
    type: "post",
    url: "AddItem",
    data: $("#newitemform").find(":input[name]").serialize(),
    success: function (d) {
       $("#Grid").DataTable().row.add($(d).get(0)).draw();
    }
});

有关代码和演示，请参阅 this example。

Answer 2

最好的选择是使用 Datatables API 向表中添加行。如上一个回复所示，您可以使用row.add() 或rows.add()。数据需要位于与您的 Datatables 数据结构配置相匹配的数据结构中，即数组或对象。

但是，您似乎正在接收 HTML 结构化数据并直接附加到表格中。在这种情况下，Datatables 不知道添加的数据。您将需要销毁 (destroy()) Datatables 表，附加您的数据，然后重新初始化 Datatables。例如：

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

       $("#Grid").DataTable({
       stateSave: true,
       fixedHeader: true,
       rowReorder: true,
       .
       .
       columnDefs: [
          { orderable: false, className: "seq-cell", targets: 0 },
          { orderable: false, targets: "_all" }
       ]
    })

    }
});