jQuery: DataTables query

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

if the dataTable has been initialised, it can't be initialised again, so if the dataTable is not null, you can try and destroy the dataTable like this:

if(oTable!=null) oTable.fnDestroy();

then you can solve the problem.

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

A quick and easy fix for this problem is to put your initial table inside a div and run an empty().append() on that div before building the table again. I thought the bDestroy parameter would take care of the css and column header problems but it did not. Hope this helps someone!