title: Datatables with multiple tables on one page
body: <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>$(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 ] }
      ]
  } );
  
  });
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p><a href="http://pastebin.com/4d3kPmk0" rel="noreferrer">http://pastebin.com/4d3kPmk0</a></p>
  
  <pre><code>$(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();
  });
  </code></pre>