Jquery Datatables 在 json 表中添加新行答案

【问题标题】：Jquery Datatables add new row in json tableJquery Datatables 在 json 表中添加新行
【发布时间】：2017-02-27 12:46:13
【问题描述】：

我正在使用：jquery.dataTables.js 来自：https://datatables.net

我正在尝试在我的 json 表中添加一个新行。

我无法让它工作任何想法为什么不呢？

jsfiddle：http://jsfiddle.net/f7debwj2/17/

html:

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
    </tr>
  </thead>
</table>

<button id="addRow">Add New Row</button>
<table id="newRow">
  <tbody>
    <tr>
      <td>Line 2
        <input type="hidden" value="2" /> </td>
      <td>DVap
        <input type="hidden" value="DVap" /> </td>
      <td>
        <input type="text" value="22" /> </td>
    </tr>
  </tbody>
</table>

jquery:

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    rowReorder: {
      dataSrc: 'order',
    },
    columns: [{
      data: 'order'
    }, {
      data: 'name'
    }, {
      data: 'place'
    }]
  });
  // add row
  $('#addRow').click(function() {
    //t.row.add( [1,2,3] ).draw();
    var rowHtml = $("#newRow").find("tr")[0].outerHTML
    console.log(rowHtml);
    dt.row.add($(rowHtml)).draw();
  });
});

【问题讨论】：

为什么不使用 .clone().appendTo()？编辑：哦 - DataTable 可能需要重新初始化 html dom ......无论如何 - jsfiddle 或代码 sn-p 会有所帮助 EDIT2 - 哦，我的错。有jsfiddle
谢谢 Adam 你能提供一个 jsfiddle 吗？谢谢

标签： javascript jquery json datatable

【解决方案1】：

就像您在documentation 中看到的那样，您需要更改这一行：

dt.row.add($(rowHtml)).draw();

到：

table.row.add($(rowHtml)).draw();

updated fiddle。

【讨论】：

【解决方案2】：

您的实际错误是 Uncaught ReferenceError: dt is not defined

只需在按钮单击事件中更改 table.row.add($(rowHtml)).draw() 而不是 dt.row.add($(rowHtml)).draw()。

【讨论】：

那主要是ref问题。当您在外部和之前设置全局范围 var dt $(document).ready(); 时，您在内部访问它就没有问题了。
你是对的，但 dt 也在同一范围内被销毁。