Replies

• snarf2larf Posts: 64Questions: 0Answers: 0

  May 2012

  If you put the hidden data in the table you should be able to filter it using:
  
  http://datatables.net/api#fnFilter
• BobSCA Posts: 3Questions: 0Answers: 0

  May 2012

  Thank you but not exactly sure how to get access to the table from my dropdown change event. I tried just enter in as oTable.fnFilter but assuming it couldn't access oTable so then tried to grab a hold of the reference to the table using the code below. Here's that change event:
  // Status dropdown change.
  $("#status-select").change(function () {
  // We have a new filter so get the new data.
  alert('In the status-select change event');
  
  // Get the current status.
  var currentStatus = $('#status-select').val();
  
  // Get the table.
  $('.sortable').each(function (i) {
  // DataTable config
  var table = $(this),
  oTable = table.dataTable({
  oTable.fnFilter('Lead');
  });
  };
  });
• BobSCA Posts: 3Questions: 0Answers: 0

  June 2012

  Figured it out with a lot of help from forum posts (thank you). I ended up switching over to load using ajax and then using the fnReloadAjax api. This required including the following function:
  
  // Customized fnReloadAJAX to allow for new source.
  $.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource) {
  
  if (typeof sNewSource != 'undefined') {
  oSettings.sAjaxSource = sNewSource;
  }
  
  this.fnClearTable(this);
  this.oApi._fnProcessingDisplay(oSettings, true);
  
  $.getJSON(oSettings.sAjaxSource, null, $.proxy(function (json) {
  
  for (var i = 0; i < json.aaData.length; i++) {
  this.oApi._fnAddData(oSettings, json.aaData[i]);
  }
  
  oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
  this.fnDraw(this);
  this.oApi._fnProcessingDisplay(oSettings, false);
  }, this));
  }
  
  I then defined my table as:
  // Setup grid and use AJAX as the source.
  $('#OppTable').dataTable({
  "bProcessing": false,
  "sAjaxSource": '/home/ReloadGrid',
  "sDom": '<"block-controls"<"controls-buttons"p>>rti<"block-footer clearfix"lf>'
  });
  
  Then in my dropdown event handler I call the fnReloadAjax function with my URL and parameter of the selected status:
  $("#status-select").change(function () {
  // We have a new filter so get the new data.
  
  // Get the current status.
  var currentStatus = $('#status-select').val();
  $('#OppTable').dataTable().fnReloadAjax('/home/ReloadGrid/?FilterValue=' + currentStatus);
  });
  
  With this I can use the paging, filtering and sorting all on the client side.
  
  Thanks!