javascript 如何使用js数组作为数据源动态更新jquery数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29531504/
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
How to dynamically update jquery datatable using js array as data source
提问by Ranjit Jena
How to dynamically update jquery datatable using js array as data source. When user click the update button a new js array should be added current data source and it should reflect on jquery datatable.
如何使用js数组作为数据源动态更新jquery数据表。当用户点击更新按钮时，一个新的 js 数组应该被添加到当前数据源中，并且它应该反映在 jquery 数据表上。
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
</head>
<body>
<div id="demo"></div>
<button id="update">Update</button>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
];
var ctr = 0;
$("#update").click(function() {
ctr++;
dataSet.push([ctr,ctr,ctr,ctr,ctr]);
console.log(JSON.stringify(dataSet));
});
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Engine" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
]
});
});
</script>
</body>
</html>
采纳答案by Shiffty
Instead of manipulating the initial data array, I recommend using the DataTables API methods like row.add()and draw()to update the data. If you need the data after the initialisation, you can access it with the data()method.
我建议使用 DataTables API 方法（如row.add()和 ）draw()来更新数据，而不是操作初始数据数组。如果您需要初始化后的数据，您可以使用该data()方法访问它。
This JSFiddlemight help you.
这个JSFiddle可能会帮助你。
回答by raghavsood33
Persist the data table in a global js variable- dataTable. Once you dataSetchanges, just destroy dataTableand initialize it again.
将数据表保留在全局 js 变量中 - dataTable。一旦你dataSet改变，只是破坏dataTable并重新初始化。
if(dataTable != null)
dataTable.destroy();
dataTable = $('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Engine" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
]
});
