Datatables daterange filtering function conflicting with searchbox filter

Question

I have created a date range filter for my datatable that is working as expected. However now the search box is not working anymore as before. I assume that it now uses my custom function that is limited on the date column. How can I specify that my custom search function is only used when the date range apply event is triggered, else the default behavior retains?

Here is the code with working date-range filter on codepen.io https://codepen.io/bintux/pen/rgYeyp


$(function() {
 var table = $("#table_1").DataTable();

 // Date range vars
 minDateFilter = "";
 maxDateFilter = "";

 $("#daterange").daterangepicker();
 $("#daterange").on("apply.daterangepicker", function(ev, picker) {
  minDateFilter = Date.parse(picker.startDate.format("YYYY-MM-DD"));
  maxDateFilter = Date.parse(picker.endDate.format("YYYY-MM-DD"));
  table.draw();
 });

 $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
  var date = Date.parse(data[1]); 

  if (
   (isNaN(minDateFilter) && isNaN(maxDateFilter)) ||
   (isNaN(minDateFilter) && date <= maxDateFilter) ||
   (minDateFilter <= date && isNaN(maxDateFilter)) ||
   (minDateFilter <= date && date <= maxDateFilter)
  ) {
   return true;
  }
  return false;
 });
});


<table id="table_1" >
 <thead>
  <tr>
   <th>Col1.</th>
   <th>Date</th>
  </tr>
 </thead>
 <tbody>
   <tr>
   <td>Set 1</td>
   <td data-order="1558358405">20 May 2019</td>
  </tr>
  <tr>
   <td>Set2</td>
   <td data-order="1558357779">20 May 2019</td>
  </tr>
....

Can I pass on arguments to the draw() function when the daterange apply is triggered?

score 0 · Accepted Answer · answered May 23 '19 at 12:14

Thanks to davidkonrad answer on a similar question here, I was able to solve it. Just moved the filter function into the daterange apply event function.

 $("#daterange").on("apply.daterangepicker", function(ev, picker) {
  minDateFilter = Date.parse(picker.startDate);
  maxDateFilter = Date.parse(picker.endDate);

  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
  var date = Date.parse(data[1]);

  if (
   (isNaN(minDateFilter) && isNaN(maxDateFilter)) ||
   (isNaN(minDateFilter) && date <= maxDateFilter) ||
   (minDateFilter <= date && isNaN(maxDateFilter)) ||
   (minDateFilter <= date && date <= maxDateFilter)
  ) {
   return true;
  }
  return false;
 });
 table.draw();
});

Updated Codepen Example

Datatables daterange filtering function conflicting with searchbox filter

1 Answers1