title: jQuery datatables pagination broken after changing to server-side processing
body: <p>I had a page that was initializing an empty dataTable, and getting the json data with $.getJSON() after a jquery change from a select.It was then adding to the table with .fnAddData.Like this:</p>
  
  <pre><code>oTableDisk = $('#disk_connection_table').dataTable({
          "bJQueryUI": true,
          "iDisplayLength": 30,
          "oLanguage": {
              "sLengthMenu": tableLength
          },
          "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
              $(nRow).attr('id', aData[0] + "|&lt;?php echo $this-&gt;hostInfo['name']; ?&gt;|&lt;?php echo $this-&gt;hostInfo['id']; ?&gt;");
              return nRow;
          },
          "aoColumns": [{"bSearchable": false, "bVisible": false}, null, null, null, null, null, null]
      });
  
  $('#disk_switch').change(function(){
          $.getJSON('/host/getavailableports?type=disk&amp;switch=' + $('#disk_switch option:selected').val(), function(data){
              if(data[0]){
                  data.reverse();
                  oTableDisk.fnClearTable();
                  $.each(data, function(index){
                  //console.log(data[index]);
                      oTableDisk.fnAddData([data[index]['Item1'],
                                          data[index]['Item2'], 
                                          data[index]['Item3'], 
                                          data[index]['Item4'], 
                                          data[index]['Item5'], 
                                          data[index]['Item6'], 
                                          data[index]['Item8']]);
  
                  });
                  enableEditable(oTableDisk);
              }
          });
      });
  </code></pre>
  
  <p>This was working fine until we needed to process more than 500 rows of information and was breaking IE with "script has become unresponsive" errors.</p>
  
  <p>Now, I'm not initializing an empty dataTable at all, but creating one when a select menu changes like this:</p>
  
  <pre><code> $('#disk_switch').change(function(){
          oTableDisk = $('#disk_connection_table').dataTable({
              "bJQueryUI": true,
              "iDisplayLength": 30,
              "bProcessing": true,
              "bServerSide": true,
              "bDestroy": true,
              "sAjaxSource": '/host/getavailableports?type=disk&amp;switch=' + $('#disk_switch option:selected').val(),
              "aaSorting": [[0, "asc"]],
              "oLanguage": {
                  "sLengthMenu": tableLength
              },
              "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
                  $(nRow).attr('id', aData[0] + "|&lt;?php echo $this-&gt;hostInfo['name']; ?&gt;|&lt;?php echo $this-&gt;hostInfo['id']; ?&gt;");
                  return nRow;
              },
              "aoColumns": [{"bSearchable": false, "bVisible": false}, null, null, null, null, null, null],
  
              "fnDrawCallback": function() {
                  $( oTableDisk.fnGetNodes() ).click( function () {
                      enableEditable(oTableDisk);
                  } );
              }
  
          });
  </code></pre>
  
  <p>After rewriting  the controller and model to support queries with limit, where and orderby arguments I'm getting data back and it seems like my JSON object is correctly formatted. The problem is that now I don't have pagination functionality. or sorting functionality. The table shows the pagination arrows as sort of greyed out, and clicking the column headers doesn't really do anything. Above the pagination links it says "Showing 1 to 30 of 30 entries (filtered from 483 total entries)" which is correct for the query.</p>
  
  <p>I think this has to do with loading the table after the page has been loaded but I don't know how to fix it.</p>