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

【问题标题】：Jquery DataTable unable to add rows using table.rows.add methodJquery DataTable 无法使用 table.rows.add 方法添加行
【发布时间】：2016-10-06 20:32:37
【问题描述】：

由于一些非常有趣的原因，我无法使用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 - 请求的未知参数 '0' 表示第 1 行第 0 列。有关详细信息，请参阅this error。

使用

数据表 1.10.12
jQuery v3.1.1

这里出了什么问题？

【问题讨论】：

我要重新看一下，我刚刚编辑了我之前的评论
不，行数不是固定的 - 列数是 2。因此，数组中的每个对象都有两个与每一列相关的键值对 - 对吗？跨度>
我知道我已经重新编辑了评论。您能否尝试在第一行 i.p.o. 中设置其他值？ 0。这是一个奇怪的问题。
做了，但这并没有什么不同。
我通常使用ajax 和php 服务器端脚本来执行此操作。我从来没有遇到过这样的问题

标签： javascript jquery html datatable

【解决方案1】：

您需要指定列。

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

【讨论】：

【解决方案2】：

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

如果您使用 underscore.js 模板或类似模板，您可能希望在 Datatable 初始化中添加 "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(); } );
}

【讨论】：