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.