jQuery: DataTables query

Question

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

while clicking on that link you are appending only body content or starting from table,thead...? — Vivek
– Vivek, Commented Apr 19, 2011 at 12:15

Martijn Pieters · Accepted Answer · 2012-11-18 14:32:55Z

4

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.

edited Nov 18, 2012 at 14:32

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Nov 18, 2012 at 14:11

inmiracle

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek · Accepted Answer · 2011-04-19 12:22:55Z

1

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

answered Apr 19, 2011 at 12:22

Vivek

11k15 gold badges51 silver badges68 bronze badges

1 Comment

Jay Chandran Over a year ago

datatables.net/forums/comments.php?DiscussionID=4776 Alan has helped me solve it. thanks for your help too.

ntdb · Accepted Answer · 2011-07-26 19:19:31Z

1

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!

answered Jul 26, 2011 at 19:19

ntdb

4312 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery: DataTables query

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related