I am using jQuery Datatable plugin for rendering a table as jQuery DataTable. I am not using any server side calls for fetching table row details.
I am generating the table HTML using jQuery from the information available on the page the user is currently viewing.
<table cellpadding="0" cellspacing="0" border="0" class="display" id="list_table">
<thead>
</thead>
<tbody>
</tbody>
</table>
When a user clicks on a link, using jQuery I build the required rows for the table and set it to the table body.
After that I initialize dataTable as show below:
$('#list_table').dataTable({
"bProcessing": false,
"bJQueryUI": true,
"bPaginate": true,
"bAutoWidth": false,
"bFilter" : true,
"bDestory" : true,
"oLanguage": { "sZeroRecords": "No data available", "sSearch" :"Filter" }
});
The above works fine when the user clicks on the link for the first time. But if the user clicks again, the I get error dataTable gives error:
DataTables warning (table id = 'list_table'): Cannot reinitialise DataTable. .....
Even though the table is shown, it loses its Datatable CSS, search no longer works, next previous no longer works.
I have tried various options like setting "bRetrieve" : true also tried checking if the datatable object is available:
if (typeof dTable == 'undefined') {
dTable = $('#list_table').dataTable({
"bProcessing": false,
"bJQueryUI": true,
"bPaginate": true,
"bAutoWidth": false,
"bFilter" : true,
"bDestory" : true,
"oLanguage": { "sZeroRecords": "No data available", "sSearch" :"Filter" }
});
} else {
dTable.fnClearTable();
}
But nothing seems to work. I have used DataTable with server side ajax call to reload data from the server where it works fine, but in this case I am not sure how to resolve this issue.
Thanks.
Jay
you will get better response of your question on dataTable forum…beacause here we shared some common problems which is use full to all people.
here is the link for that forum..
DataTable forum