Datatables with multiple tables on one page

Question

I look at the datatables.net website for some clarification or documentation, and not what to do if you have more than one table on one page and you want to handle each differently.

I tried the obvious. Assigning each other an identifier, and then executing the code for each of my js, but for some reason does not allow it. I do not receive an error message, but the datatables itself breaks and does nothing.

$(document).ready(function() { var oTable = $('#inbox').dataTable( { "bAutoWidth": false, "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0, -1 ] }, { "sWidth": "20px", "aTargets": [ 0, -1 ] }, { "sWidth": "100px", "aTargets": [ 1 ] }, { "sWidth": "150px", "aTargets": [ 3 ] } ] } ); var oTable = $('#sent').dataTable( { "bAutoWidth": false, "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0, -1 ] }, { "sWidth": "20px", "aTargets": [ 0, -1 ] }, { "sWidth": "100px", "aTargets": [ 1 ] }, { "sWidth": "150px", "aTargets": [ 3 ] } ] } ); }); 

UPDATE

http://pastebin.com/4d3kPmk0

 $(document).ready(function() { var oTable = $('.dataTable').dataTable( { "bAutoWidth": false, "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0, -1 ] }, { "sWidth": "20px", "aTargets": [ 0, -1 ] }, { "sWidth": "100px", "aTargets": [ 1 ] }, { "sWidth": "150px", "aTargets": [ 3 ] } ] } ); }); $(window).load(function(){ /* * Tabs */ $('#tab-panel-1').createTabs(); }); 

Answer 1

You are updating the same variable.

 var oTable = $('#inbox').dataTable({ /* ... */ }); var oTable = $('#sent').dataTable({ /* ... */ }); 

The "oTable" part of this is what Allan (the author) uses in his examples to fit his conventions. The lowercase "o" says that the object, and this is a table. But you can use any name you want.

You had the right idea, but you need to use:

 var inboxTable = $('#inbox').dataTable({ /* ... */ }); var sentTable = $('#sent').dataTable({ /* ... */ }); 

And then, if you follow its other examples on the site, you simply substitute your own variable name for "oTable".

Live sample: http://live.datatables.net/amixis/edit#javascript,html

---

[update]

I should mention that lately I have been storing several tables in a nested object; I have a polling mechanism that iterates over specific arrays of tables (and not others), so the sample object looks something like this:

 var oTables = { "polling" : [ $('#someTable').dataTable(opts), $('#anotherTable').dataTable(opts) ], "nonpolling" : [ $('#staticTable').dataTable(opts) ] }; 

The end result is the same. But now I can call setTimeouts on my array of survey table objects:

 if(someBoolean) { for(var i=0; i < oTables.polling.length; i++) { setTimeout(pollingFunction, 5000) } } 

(very simplified)