过滤具有日期范围的数据表

Question

我想将数据范围选择器插件集成到数据表中，我写道：

$(document).ready(function() {

  $(function() {
    var start = moment("2017-01-01 12:34:16");
    var end = moment("2018-03-03 10:08:07");

    function cb(start, end) {
      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
      startDate: start,
      endDate: end,
      ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      }
    }, cb);

    cb(start, end);

  });


  $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
   var start = picker.startDate.format('YYYY-MM-DD');
   var end = picker.endDate.format('YYYY-MM-DD');



  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = start;
      var max = end;
      var startDate = new Date(data[1]);
      if (min == null && max == null) {
        return true;
      }
      if (min == null && startDate <= max) {
        return true;
      }
      if (max == null && startDate >= min) {
        return true;
      }
      if (startDate <= max && startDate >= min) {
        return true;
      }
      return false;
    }
  );
  table.draw();
});

  var dataSet = [
    ['2093',
      'Feb 23, 2018',
      'asd asd ',
      '[email protected]',
      '£ 50',
      '£0.00',
      "Feb 23, 2019",
    ],
    ['2092',
      'Feb 23, 2018',
      'asddd asddd',
      '[email protected]',
      '£ 50',
      '£0.00',
      "Feb 23, 2019",
    ],
    ['2050',
      'Feb 20, 2018',
      'Angus Fret',
      '[email protected]',
      '£ 50',
      '£0.00',
      "Feb 20, 2019",
    ],
    ['2048',
      'Feb 19, 2018',
      'John Smith',
      '[email protected]',
      '£ 50',
      '£0.00',
      "Feb 19, 2019",
    ],

    ['2046',
      'Feb 19, 2018',
      'Ana Ana',
      '[email protected]',
      '£ 50',
      '£0.00',
      "Feb 19, 2019",
    ],
    ['2045',
      'Feb 19, 2018',
      'Ray N',
      '[email protected]',
      '£ 50',
      '£0.00',
      "Feb 19, 2019",
    ],
    ['2044',
      'Feb 16, 2018',
      'Paul  N',
      '[email protected]',
      '£ 200',
      '£0.00',
      "Feb 16, 2019",
    ],
    ['2042',
      'Feb 13, 2018',
      'Bradley New',
      '[email protected]',
      '£ 100',
      '£0.00',
      "Feb 13, 2019",
    ],

    ['2012',
      'Jan 27, 2018',
      'Mark Zuckenberg',
      '[email protected]',
      '£ 150',
      '£0.00',
      "Jan 27, 2019",
    ],

  ];
  var table = $('#example').DataTable({
    "order": [
      [0, "desc"]
    ],
    lengthChange: false,
    data: dataSet,
    columns: [{
        title: "ORDER ID"
      },
      {
        title: "ORDER DATE"
      },
      {
        title: "PURCHASED BY"
      },
      {
        title: "RECIPIENT"
      },
      {
        title: "ORDER TOTAL"
      },
      {
        title: "VAT"
      },
      {
        title: "EXPIRY"
      }

    ]
  });






});

正如您所看到的，我使用搜索数据表API函数来比较日期并获取日期之间的数据（最小值，最大值）

有什么问题？

当我尝试使用新的过滤数据绘制表时，只有最小和最大日期之间的日期，我从datatable插件获得0行。为什么？

这是小提琴：https://jsfiddle.net/ankepv5v/16/

怎么了？我也没有在我的代码中看到任何错误...请帮助

我怎么能解决我的问题？ WHy表返回0结果？

Answer 1

主要问题是您的日期比较

var start = picker.startDate.format('YYYY-MM-DD');
var end = picker.endDate.format('YYYY-MM-DD');

应该：

var start = picker.startDate;
var end = picker.endDate;

然后，您最终还会遇到一个问题，即当您进行过滤时，您的数据会完全从搜索中删除，因此您在绘制表格后需要这样做

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

https://jsfiddle.net/ankepv5v/79/