Menu
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>
508
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.
This JSFiddle might help you.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
