Datatables with multiple tables on one page

Question

I'm looking on the datatables.net website for some clarification or documentation rather about what to do if you have more than 1 table on a single page and want to handle each one differently.

I tried the obvious. Assigning each to a different id and then performing the code for each in my js but for some reason its not allowing it. I'm not getting an error but datatables itself breaks and doesn't perform anything.

$(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 redeclaring the same variable.

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

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

The "oTable" part of this is just what Allan (the author) happens to use in his examples to fit in with his conventions. The lowercase 'o' refers to something that's an object, and it's a table. But you can use whatever 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're following his other examples on the site, you just substitute your own variable name for "oTable".

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

---

[update]

I should mention that recently I'm storing multiple tables in a nested object; I have a polling mechanism that iterates over particular 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 net result is still the same. But I can now call setTimeouts over my array of polling table objects:

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

(highly simplified)