Question

我为我的数据表创建了一个日期范围过滤器，该过滤器可以按预期工作。但是，现在搜索框不再像以前那样工作了。我假设它现在使用在日期列上受限制的自定义函数。如何指定仅在触发日期范围应用事件时使用我的自定义搜索功能，否则保留默认行为？

这是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（）函数吗？

Answer 1

感谢davidkonrad对类似问题here的回答，我得以解决。只需将过滤器功能移到daterange apply事件功能中即可。

function StartConfetti() {
      setTimeout(function(){
          W = window.innerWidth;
          H = window.innerHeight;
          canvas.width = W;
          canvas.height = H;
          (function animloop() {
              if (animationComplete) return null;
              animationHandler = requestAnimFrame(animloop);
              return Draw();
          })();
      }, 29000);
  }

Updated Codepen Example

数据表日期范围过滤功能与搜索框过滤器冲突

1 个答案: