Функция фильтрации диапазона дат Datatables конфликтует с фильтром окна поиска

Я создал фильтр диапазона дат для своей таблицы данных, который работает должным образом. Однако теперь окно поиска больше не работает, как раньше. Я предполагаю, что теперь он использует мою пользовательскую функцию, которая ограничена столбцом даты. Как я могу указать, что моя пользовательская функция поиска используется только тогда, когда запускается событие применения диапазона дат, в противном случае сохраняется поведение по умолчанию?

Вот код с работающим фильтром диапазона дат на 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>
....

Могу ли я передать аргументы функции draw(), когда запускается применение диапазона дат?


filter jquery daterangepicker datatables
person Eike    schedule 21.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Благодаря davidkonrad ответ на аналогичный вопрос здесь, я смог решить эту проблему. Просто переместил функцию фильтра в функцию события применения диапазона дат.

 $("#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();
});

Обновленный пример Codepen

person Eike    schedule 23.05.2019