Question

我试图动态地将<tr/>标签添加到DataTable，但我没有找到关于如何添加TR流程＆＃34;的实际良好文档。应该工作。我有这个作为我的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);
    }
});

＆＃34; d＆＃34;参数是一行的HTML;我将它附加到身体上。这正确地添加了但是没有启用行重新排序功能。附加到DataTable的正确方法是什么，然后重新启用任何功能？

Answer 1

最好的选择是使用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" }
       ]
    })

    }
});

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

请参阅this example以获取代码和演示。

将行附加到DataTables网格

2 个答案: