Dynamic data table pagination and sorting with changing/dynamic contents
http://www.datatables.net/releases/DataTables-1.9.3.zip
I am trying to use the above plugin. I call function paging() at onload and it works fine
<body id="dt_example" onload='paging()'>
But when i reload the table's innerHTML with the same data (static data that I had in my table) on a button click as (example is id of mytable)
<input type ='button' value='click To reload Table contents' onclick='remake()'/>
function remake()
{
var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
ht = ht + '<tbody>';
ht = ht + '<tr><td> shjhds</td><td></td></tr>';
ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
ht = ht + '</tbody>';
$("#example").html(ht);
paging();
}
function paging()
{
$('#example').dataTable();
}
Nothing works after dynamically changing the contents of a table neither sorting nor pagination
datatables.net have clearly guided to use $('#example').dataTable(); still I am not getting it working when I load contents dynamically. I need to know what I am doing wrong?
Optional to view (My Complete Code)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js">
</script>
<script type="text/javascript" charset="utf-8">
function paging()
{
$('#example').dataTable();
}
function remake()
{
var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
ht = ht + '<tr><td> shjhds</td><td></td></tr>';
ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
ht = ht + '</tbody>';
$("#example").html(ht);
paging();
}
</script>
</head>
<body id="dt_example" onload='paging()'>
<div id="container">
<input type ='button' value='click To reload Table contents' onclick='remake()' />
<div id="demo">
<table cellpadding="0" cellspacing="0" border="5" class="display" id="example" width="100%">
<thead>
<tr>
<th>dfsdd</th>
<th>Browser</th>
</tr>
</thead>
<tbody>
<tr><td> shjhds</td><td></td></tr>
<tr><td>dsdsd</td><td>xsax</td></tr>
<tr><td>dasdd</td><td>bdsffa</td></tr>
<tr><td>fsdfsd</td><td></td></tr>
<tr><td>kghfagh</td><td>xzxz</td></tr>
<tr><td></td><td>kghfagh</td></tr>
<tr><td>rgsg</td><td>bnfjf</td></tr>
<tr><td></td><td>fsdfs</td></tr>
<tr><td>dfsas</td><td>caadada</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Answer
A quick look at the API shows that you can destroy/remake the table or manipulate it. I'll just show you the destroy and remake method. But you can use javascript to remove/clear the table and add new rows to the table without directly editing the DOM.
var myTable;
function paging() {
myTable = $('#example').dataTable();
}
function remake() {
myTable.fnDestroy();
var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
ht = ht + '<tr><td> shjhds</td><td></td></tr>';
ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
ht = ht + '</tbody>';
$("#example").html(ht);
paging();
}