Question

由于一些非常有趣的原因，我无法使用dataTables将多行添加到简单表中。这就是事情，

我使用数据表向html表添加4行，特别是使用table.rows.add方法（link）。

下面是它的简单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警告：table id = items-table -Requested unknown parameter ＆＃39; 0＆＃39;对于第1行第0列。有关详细信息，请参阅this error。

使用

DataTables 1.10.12
jQuery v3.1.1

这里出了什么问题？

Answer 1

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

如果使用underscore.js模板或类似模板，则可能需要在数据表初始化中添加"fnDrawCallback": function，并在重绘表后使用function将事件绑定到行。另一种可能的方法是使用Datatables提供的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(); } );
}

Answer 2

您需要指定列。

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

Jquery DataTable无法使用table.rows.add方法

2 个答案: