如何使用js数组作为数据源动态更新jquery数据表
Posted
技术标签:
【中文标题】如何使用js数组作为数据源动态更新jquery数据表【英文标题】：How to dynamically update jquery datatable using js array as data source 【发布时间】：2015-06-14 09:44:38 【问题描述】：。 当用户单击更新按钮时，应该添加一个新的 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>
【问题讨论】：
【参考方案1】：我建议使用 row.add() 和 draw() 等 DataTables API 方法来更新数据，而不是操作初始数据数组。如果初始化后需要数据，可以通过data()方法访问。
这个JSFiddle 可能会对你有所帮助。
【讨论】：
【参考方案2】：将数据表保存在全局 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"
]
);
【讨论】：
如果表用dataTable()初始化，则没有destroy()方法，在这种情况下应该是api().destroy()。以上是关于如何使用js数组作为数据源动态更新jquery数据表的主要内容，如果未能解决你的问题，请参考以下文章
使用jQuery从数组数组动态生成<table>时如何排除ID列
JS/JQuery : 在生成新字段的同时继续表单数组的索引