將行追加到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();
    }
});

有關代碼和演示，請參見此示例 。