将行附加到datatable网格

I'm trying to add <tr/> tags dynamically to a DataTable, but I didn't find actual good documentation on how the "adding TR process" is supposed to work. I have this as my DataTables setup:

我正在尝试将标签动态地添加到一个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++)
   {
       ..
   }
});

I'm getting the definition of the item in the grid from an MVC action method as an HTML string, via a jQuery AJAX statement:

我通过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);
    }
});

The "d" parameter is the HTML for a row; I'm appending it to the body. That adds correctly and but doesn't have the row reorder functionality enabled then. What is the proper way to append to a DataTable, then re-enable whatever functionality?

“d”参数是一行的HTML;我把它贴在尸体上。这可以正确地添加，但是并没有启用行重新排序功能。添加到DataTable然后重新启用任何功能的正确方法是什么?

2 个解决方案

#1

Use row.add() API method to add a new row instead of appending to the table body.

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

If d contains string in the following format <tr>...</tr>, you could just use $("#Grid").DataTable().row.add($(d).get(0)) to add a new row.

如果d包含以下格式的字符串…，您可以使用$(“#Grid”). datatable ().row.add($(d).get(0))添加新行。

For example:

例如:

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

See this example for code and demonstration.

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

#2

The best option is to use Datatables API's to add rows to the table. As indicated in the previous response you can use either row.add() or rows.add(). The data needs to be in a data structure that matches your Datatables data structure config, ie, arrays or objects.

最好的选择是使用Datatables API向表中添加行。如前面的响应所示，您可以使用row.add()或rows.add()。数据需要处于与您的datatable数据结构配置(例如，数组或对象)匹配的数据结构中。

However it looks like you are receiving HTML structured data and appending directly to the table. In this case Datatables is not aware of the added data. You will need destroy (destroy()) the Datatables table, append your data then re-init Datatables. For example:

但是，看起来您正在接收HTML结构化数据，并将其直接附加到表中。在这种情况下，Datatables不知道添加的数据。您将需要销毁(销毁()datatable表，附加数据，然后重新初始化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" }
       ]
    })

    }
});

#1