113
rated 0 times
[
114]
[
1]
/ answers: 1 / hits: 15820
/ 9 Years ago, thu, april 9, 2015, 12:00:00
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.
<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>
More From » jquery
