将行追加到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

最好的选择是使用Datatables API向表添加行。 如上一个响应所示，您可以使用row.add（）或rows.add（） 。 数据必须采用与您的Datatables数据结构配置相匹配的数据结构，即数组或对象。

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

$.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" }
       ]
    })

    }
});

Answer 2

使用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();
    }
});

有关代码和演示，请参见此示例 。