通过javascript向数据表添加行

Posted 2023-05-07

【中文标题】通过javascript向数据表添加行

【英文标题】：Adding rows to datatable through javascript

【发布时间】：2015-07-15 09:29:18

【问题描述】：

我想在使用 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>

【参考方案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>

【讨论】：

您建议的代码完美运行...但它会发出警告，指出无法重新初始化数据表。有什么解决办法吗？它在 JSFiddle 中工作，不知道为什么......我想我错过了一些库

您必须已经在其他地方初始化了它。第一次将$('#dataTables-example').dataTable() 存储在变量中，然后使用它。

完美！那么问题是它在另一个文件中使用，但在同一个会话中运行。我重命名了这个表，现在它工作得很好。感谢您的所有帮助。

知道如何在 rows.add 中添加复选框列吗？

【参考方案2】：

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

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

演示@Fiddle

【讨论】：

这可行，但它会引发无法重新初始化数据表的警告。欲了解更多信息，datatables.net/tn/3

这可能意味着您已经在代码中的其他地方初始化了数据表，例如$(selector).DataTable()

它可以在您的小提琴中使用，但不能在我的独立机器上使用。不知道为什么！

不，我只有以下声明:::: 不是 html，我指的是你的脚本块。从我的回答中添加后，您是否在页面上有两次$('#dataTables-example').DataTable()？

【参考方案3】：

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

承认上述代码结构并不总是特别 有吸引力的，DataTables 作为一个检索 [DT] 选项，可以用来告诉 您知道不能初始化选项的 DataTables 初始化后改变了，如果发生这种情况，你 只想返回 DataTable 实例。

此可选参数可以提供显式检查的捷径 使用 $.fn.dataTable.isDataTable() 获取 数据表实例：

table = $('#example').DataTable( 
retrieve: true,
paging: false  );

【参考方案4】：

也许您可以在之前生成行，然后使用 jQuery 将其附加到 tbody

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

【讨论】：

OP 正在使用 DataTables 插件以编程方式添加/操作数据。