javascriptjquerydatatablesdatatables-1.10

Reset filtered data in DataTables


I have a Datatable where the data is retrieved using AJAX. I then have two search functions that filter the data. The search functions work fine once working with unfiltered data. Once a filter is applied, I am unable to clear the filter or apply the other one as both filters are mutually exclusive (One filter is All Paid and the other is All Unpaid). I think my issue is that once the data is filtered then I try to clear or apply another filter, it is acting on a subset of the data (the already filtered data). How do I clear reset the filtered data before I apply a new filter and how do I reset the filters. I have tried a few solutions already on this site but they did not work. Here are my filter functions.

function outstandingFees() {
  $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
      var zero = 0;
      var fee = parseFloat(data[8]) || 0; // use data for the balance due column
      if (fee > zero) {
        return true;
      }
      return false;
    }
  );
  table.draw();
}
 
function paidFees() {
  $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
      var zero = 0;
      var fee = parseFloat(data[8]); // use data for the balance due column
      if (fee === zero) {
        return true;
      }
      return false;
    }
  );
  table.draw();
}

function allFees() {
  $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
      var zero = 0;
      var fee = parseFloat(data[8]) || 0; // use data for the balance due column
      if (zero <= fee) {
        return true;
      }
      return false;
    }
  );
  table.draw();
}

Solution

  • As said by davidkonrad

    $.fn.dataTable.ext.search.pop()
    

    worked for me. I just added it to the top of each method in order to clear the filter before applying a new one.