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

- ATP

Answer 1

你的代码可以正常工作，但仅适用于插件版本1.9.x（或早期版本）。

$('#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网站上最新版本（1.10.x）的示例：

请参考datatables.net网站上的示例。

$('#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>

- Blazemonger

---

你建议的代码完美地运行了... 但是它会抛出一个警告，说数据表无法重新初始化。有什么解决办法吗？它在JSFiddle上可以运行，不确定为什么... 我想我可能缺少一些库。 - ATP

你必须在其他地方初始化它。第一次将 $('#dataTables-example').dataTable() 存储在一个变量中，然后使用该变量即可。 - Blazemonger

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

有什么办法可以在 rows.add 中添加复选框列吗？ - Sana Ahmed

Answer 2

从API中，以下是一种添加行的方式：

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

Demo@Fiddle

- lshettyl

---

这可能意味着您已经在代码的其他地方初始化了datatable，例如 $(selector).DataTable()。 - lshettyl

它在你的fiddle上运行正常，但在我的独立机器上却不行。不确定为什么！ - ATP

不，我只做了一次... 我只有一个............. var dataTable = $（'#dataTables-example'）.DataTable（）; - ATP

好的，这就是错误实际上的意思。无论如何，请尝试 var dataTable = $('#dataTables-example').DataTable({destroy: true}); 就像这样。 - lshettyl

让我们在聊天中继续这个讨论。 - ATP

Answer 3

为了解决在使用DataTables时出现重新初始化警告的问题，您可以尝试使用retrieve选项。www.datatables.net/manual/tech-notes详细说明了它的工作原理。您可以在这里阅读有关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 } );

- MEC

Answer 4

也许你可以使用jQuery在tbody中生成行，然后将其附加到tbody中。

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

- Adrian Bolonio

---

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