Javascript 通过javascript向数据表添加行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30056500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding rows to datatable through javascript
提问by Ashwin Tumma
I want to add rows to the datatable when the page is displayed using a javascript array. I am trying to figure this out, but the row does not get add. Any help is appreciated..
我想在使用 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>回答by Blazemonger
Your code works fine, but only with version 1.9.x (or earlier) of the plugin.
您的代码工作正常，但仅适用于插件的 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>Following the examples on the datatables.net web sitefor the latest version (1.10.x):
按照最新版本 (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>回答by lshettyl
回答by MEC
To address the reinitialization warning challenge when using DataTables, you may want to try the retrieve option. www.datatables.net/manual/tech-notesexplains how it works. You can read about Retrieve here.
要解决使用 DataTables 时重新初始化警告的问题，您可能需要尝试retrieve 选项。 www.datatables.net/manual/tech-notes解释了它是如何工作的。您可以在此处阅读有关检索的信息。
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 } );
承认上述代码结构并不总是特别有吸引力，DataTables 作为检索[DT]选项可用于告诉 DataTables 您知道初始化后不能更改初始化选项，并且应该发生这种情况，您只希望返回 DataTable 实例。
当获取 DataTables 实例时，此可选参数可以提供使用 $.fn.dataTable.isDataTable() 进行显式检查的捷径：
table = $('#example').DataTable( { retrieve: true, paging: false } );
回答by Adrián Bolonio
Maybe you can generate the row before and then append it to the tbody just using jQuery
也许您可以在之前生成行，然后仅使用 jQuery 将其附加到 tbody
$("#dataTables-example > tbody").append("<tr><td>row content</td></tr>");
