Question

我想在使用javascript数组显示页面时向数据表添加行。我试图解决这个问题，但行没有添加。任何帮助表示赞赏..

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您的代码运行正常，但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 2

从API开始，这是添加行的方法之一：

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

演示@ Fiddle

Answer 3

要在使用DataTables时解决重新初始化警告问题，您可能需要尝试检索选项。 www.datatables.net/manual/tech-notes 解释了它的工作原理。您可以阅读有关检索 here 的信息。

承认上述代码结构并非总是特别   有吸引力的，DataTables作为检索[DT]选项，可以用来说明   DataTables，您知道初始化选项不可能   在初始化之后发生变化，那就应该发生，那就是你   只想返回DataTable实例。

此可选参数可以为显式检查提供快捷方式   获取a时使用$ .fn.dataTable.isDataTable（），如上所示   DataTables实例：
table = $('#example').DataTable( {
retrieve: true,
paging: false } );

Answer 4

也许您可以先生成行，然后使用jQuery

将其附加到tbody

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

通过javascript向datatable添加行

4 个答案: