通过 javascript 向数据表添加行

Question

我想在使用 javascript 数组显示页面时向数据表添加行。我试图弄清楚这一点，但该行没有添加。感谢任何帮助..

$('#dataTables-example').DataTable().fnAddData([
  '1', '1', '1'
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
  <thead>
    <tr>
      <th>Host</th>
      <th>Method</th>
      <th>SSL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 1

也许您可以在之前生成行，然后使用 jQuery

将其附加到 tbody

$("#dataTables-example > tbody").append("<tr><td>row content</td></tr>");

Answer 2

您的代码工作正常，但是 only with version 1.9.x (or earlier) of the plugin。

$('#dataTables-example').DataTable().fnAddData([
  '1', '1', '1'
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
  <thead>
    <tr>
      <th>Host</th>
      <th>Method</th>
      <th>SSL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

按照 datatables.net web site 上的示例获取最新版本 (1.10.x)：

$('#dataTables-example').DataTable().row.add([
  '1', '1', '1'
]).draw();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
  <thead>
    <tr>
      <th>Host</th>
      <th>Method</th>
      <th>SSL</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 3

来自API，这是添加行的方法之一：

var dataTable = $('#dataTables-example').DataTable();
dataTable.row.add(['1','1','1' ]).draw();

演示@Fiddle

Answer 4

要解决使用 DataTables 时的重新初始化警告问题，您可能需要尝试检索选项。 www.datatables.net/manual/tech-notes explains how it works. You can read about Retrieve here。

In acknowledgement that the above code structure isn't always particularly attractive, DataTables as a retrieve [DT] option which can be used to tell DataTables that you are aware that the initialisation options can't be changed after initialisation, and that should that occur, that you just want the DataTable instance to be returned.

This optional parameter can provide a short-cut to the explicit check using $.fn.dataTable.isDataTable() as above when obtaining a DataTables instance:
table = $('#example').DataTable( {
retrieve: true,
paging: false } );

通过 javascript 向数据表添加行

Adding rows to datatable through javascript

html

javascript

jquery

datatables

jquery-datatables