problem with 'datatable' jquery plugin and two table (ajax related)

Question

i have two tabs that their content loads by ajax. both have a table in their content. i want to apply 'datatable' jquery plugin to both table. tables have the same id because they are create by a function.but their rows are different.

datatable plugin is applied to first tab table well but on the second one give this error:

"DataTables warning (table id = 'dttable'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster)."

i use "bDestroy":true in datatable plugin define.but in this way the plugin doesn't show in second table.

would you help me?

Answer 1

Your problem is that both tables have the same ID, which is invalid HTML. When you try to initialize the second Databable, your selector only finds the first table and tries to initialize Datatables on the first table again, which results in the error that you are getting.

You need to change your function to create each table with a unique ID and initialize each table by its respective ID.

Answer 2

Why not set the Datatables by a className rather than ID then it can apply to both of them?

When retrieving the data you can use something like $('.dataTableStyle').eq(1) to get information from the relevant one.

Answer 3

try this code

$(document).ready(function() {
         oTable = $('#DataTables_Table_0').dataTable({   //DataTables_Table_0 <-------table id
                iVote: -1,   //your field name 
                "bRetrieve":true
            });

        oTable.fnSort( [ [1,'desc'] ] );
     });

Answer 4

use this in function event when you would change your table data

$('#tbl_resultates').dataTable().fnDestroy();

and add

"bRetrieve": true,

in

$('#tbl_resultates').dataTable({

Answer 5

I'm using mvc3 and my problem was with initializing a dataTable in a view, then rendering a partial view with another dataTable. The issue was not in the id's of the 2 tables, but in the way the partial views get rendered in the framework. In my case, I had to move the script, or reference to the script, into the view that hosts the partial view. I had an issue similar to this using the Google Maps api.