Jquery DataTable无法使用table.rows.add方法添加行

Question

由于一些非常有趣的原因，我无法使用datatable向一个简单的表添加多行。事情是这样的

我正在使用datatable添加4行到html表，特别是使用table.rows.add方法(链接)。

下面是它的简单html代码，其中已经存在一个示例行。

<table id="items-table" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>ID</th>
      <th>Item Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>Sample Object</td>
    </tr>
  </tbody>
</table>

这是它的javascript代码。

// create a dataTable
var itemsTable = $("#items-table").DataTable({
  paging: false,
  searching: false
});
// add data as rows. Make sure to call the ```.draw``` method.
itemsTable.rows.add([{
    "id": "1",
    "item": "Aardvark"
  }, {
    "id": "2",
    "item": "Red Bull"
  }, {
    "id": "3",
    "item": "Jack in the Box"
  }, {
    "id": "4",
    "item": "Chair"
}]).draw();

错误说:

DataTable warning: table id=items-table -Requested unknown parameter'0'表示第1行第0列。有关详细信息，请参阅此错误。

使用

• 的datatable 1.10.12
jQuery v3.1.1

这里出了什么问题?

Answer 1

您需要指定列。

// create a dataTable
var itemsTable = $("#items-table").DataTable({
                  paging: false,
                  searching: false,
                  columns: [{data: 'id'}, {data: 'item'}]
                  });

Answer 2

一种解决方法是将所有数据放在一个常规表中，然后将其初始化为dataTable，而不是添加单独的行。

你可能想要添加"fnDrawCallback": function在你的Datatable初始化，如果你正在使用下划线模板或类似的，并使用function绑定事件到行表后重新绘制。另一种可能的方法是使用数据表提供的order.dt或search.dt或page.dt事件来做到这一点。可能像:

function bind_feedback_behavior(){
  $('table.program-status')
    .on( 'order.dt',  function () { enable_feedback_behavior(); } )
    .on( 'search.dt', function () { enable_feedback_behavior(); } )
    .on( 'page.dt',   function () { enable_feedback_behavior(); } );
}