title: Two jQuery DataTables - attempting to reload, show/hide columns, etc - fails for one of the the DataTables but not the other
body: <p>I have two <a href="http://datatables.net/" rel="nofollow">DataTables</a> objects on a page, lets call them searchResultsTable and currentPortfolioTable. I'm using the <a href="http://datatables.net/plug-ins/api#fnReloadAjax" rel="nofollow">fnReloadAjax</a> plugin to reload the DataTables on demand when I click a button. However only one of the tables loads the new data (currentPortfolioTable), searchResultsTable does perform the ajax requests for the data but fails to load the new (and valid) data into the table.</p>
  
  <p>I've attempted destroying the DataTable and creating a new one and even rewrote parts of the fnReloadAjax plugin to see if I could produce a different result.</p>
  
  <p>Even when only fnReloadAjax is called for the currentPortfolioTable it refuses to display the new data loaded.</p>
  
  <p>The problem of the searchResultsTable failing to load new data also occurs on showing/hiding columns using the bVisible state of the aoColumns property of the DataTable.</p>
  
  <p>Sample Code:</p>
  
  <pre><code>var dataTableObjects = dataTableObjects || {
      "searchResultsTable": {},
      "currentPortfolioTable": {}
  };
  
  var _rankingsRootUrl = window.ROOT + 'rankings/';
  
  var _defaultDataTableSettings = {
      "aoColumns": [
          {   "bSortable": false,
              "sTitle": "Add to Portfolio",
              "bVisible": true
          },
          {
              "bSortable": true,
              "sTitle": "Name of Investment",
              "bVisible": true
          },
          {   "bSortable": true,
              "sTitle": "Chart",
              "bVisible": true
          },
          {   "bSortable": true,
              "sTitle": "Rating",
              "bVisible": true
          },
          {   "bSortable": true,
              "sTitle": "Minimum",
              "bVisible": true
          },
          {   "bSortable": true,
              "sTitle": "ROR",
              "bVisible": false
          },
          {   "bSortable": true,
              "sTitle": "Max DD",
              "bVisible": false
          },
          {   "bSortable": true,
              "sTitle": "Sharpe",
              "bVisible": false
          },
          {   "bSortable": true,
              "sTitle": "Sterling",
              "bVisible": false
          }
      ],
      "aaSorting": [
      ],
      "sAjaxSource": _rankingsRootUrl + 'search_results/',
      "bServerSide": true,
      "bProcessing": true,
      "bPaginate": false,
      "bLengthChange": false,
      "sScrollY": 200,
      "sScrollX": "100%",
      "sScrollXInner": "100%",
      "bScrollCollapse": true,
      "fnServerData": function ( sSource, aoData, fnCallback ) {
          $.ajax( {
              "dataType": 'json',
              "type": "POST",
              "url": sSource,
              "data": aoData,
              "success": fnCallback
          } );
      },
      "fnServerParams": function ( aoData ) {
          aoData.push(
              {"name": "program_type", "value": $(':input#RankingProgramType').val()},
              {"name": "program_name", "value": $(':input#RankingProgramName').val()},
              {"name": "min_investment", "value": $(':input#RankingMinimumInvestment').val()},
              {"name": "rate_of_return", "value": $(':input#RankingRateOfReturn').val()},
              {"name": "max_dd", "value": $(':input#RankingMaxDd').val()},
              {"name": "time_span", "value": $(':input#RankingTimeSpan').val()},
              {"name": "flags", "value": $(':input#RankingFlags').val()},
              {"name": "strategies", "value": $(':input#RankingStrategies').val()},
              {"name": "recommended", "value": $(':input#RankingRecommended').val()},
              {"name": "portfolio_id", "value": (window.PORTFOLIO &amp;&amp; window.PORTFOLIO.id) || ""}
          );
      }
  };
  
  var _defaultCurrentPortfolioTableSettings = {
      "aoColumns": [
          {
              "bSortable": true,
              "sTitle": "Name of Investment",
              "bVisible": true
          },
          {   "bSortable": true,
              "sTitle": "Chart",
              "bVisible": true
          },
          {   "bSortable": true,
              "sTitle": "Rating",
              "bVisible": true
          },
          {   "bSortable": true,
              "sTitle": "Minimum",
              "bVisible": true
          },
          {   "bSortable": true,
              "sTitle": "ROR",
              "bVisible": false
          },
          {   "bSortable": true,
              "sTitle": "Max DD",
              "bVisible": false
          },
          {   "bSortable": true,
              "sTitle": "Sharpe",
              "bVisible": false
          },
          {   "bSortable": true,
              "sTitle": "Sterling",
              "bVisible": false
          }
      ],
      "aaSorting": [
      ],
      "sAjaxSource": _rankingsRootUrl + 'current_portfolio/',
      "bServerSide": true,
      "bProcessing": true,
      "bPaginate": false,
      "bLengthChange": false,
      "sScrollY": 200,
      "sScrollX": "100%",
      "sScrollXInner": "100%",
      "bScrollCollapse": true,
      "fnServerData": function ( sSource, aoData, fnCallback ) {
          $.ajax( {
              "dataType": 'json',
              "type": "POST",
              "url": sSource,
              "data": aoData,
              "success": fnCallback
          } );
      },
      "fnServerParams": function ( aoData ) {
          aoData.push(
              {"name": "portfolio_id", "value": (window.PORTFOLIO &amp;&amp; window.PORTFOLIO.id) || ""}
          );
      }
  };
  
  dataTableObjects.searchResultsTable = $('#search-results table').dataTable(_defaultDataTableSettings);
  dataTableObjects.currentPortfolioTable = $('#currently-in-portfolio table').dataTable(_defaultCurrentPortfolioTableSettings);
  
  $("#rankings").on("click", "a.add", function (e){
     dataTableObjects.searchResultsTable.fnReloadAjax('/datable1-url');
     dataTableObjects.currentPortfolioTable.fnReloadAjax('/datable2-url');
     e.preventDefault();
  });
  </code></pre>
  
  <p>Attempted Fixes:</p>
  
  <ul>
  <li>Using callback method from fnReloadAjax to fire the reloading of data for dataTable2</li>
  <li>Verifying that the ids for each table is unique</li>
  <li>Verifying that the dataTableJSObjects are the correct and unique tables for the page</li>
  <li>Console records no errors or issues</li>
  <li>JShinted js to ensure no js errors or mistakes</li>
  <li>Turned off fnReloadAjax dataTableObjects.searchResultsTable and dataTableObjects.currentPortfolioTable still does not reload correctly</li>
  <li>Replaced using fnReloadAjax with fnDraw</li>
  </ul>