提问者:小点点

使用DatePicker筛选DataTable


我的页面中有一个名为“search_table”的DataTable。我在表中有一个附加的标题行,它具有不同的筛选选项(dropdown、text、date_pickers)。对于日期列,我有两个datepicker,一个用于min,一个用于max。我可以根据datepickers为datatable筛选数据,但有一个问题:

当我选择一个日期时,我的表中的所有行都消失了,我必须点击其中的一个标题(就像对数据进行排序一样)以获得数据出现。一旦我这样做,正确的数据显示(日期在min和max之间)。

我使用什么功能来强制datapicker重新绘制表?在我的就绪函数中,我有以下代码:

      $(document).ready(function() {
      var table = $('#search_table').DataTable();
      $(".datepicker").datepicker( {
          maxDate:0,
          changeMonth: true,
          changeYear: true,
          dateFormat: 'yy-mm-dd',
          onClose: function(selectedDate) {
              table.draw();}});
      $('#min_create, #max_create, #min_update, #max_update').keyup(function() { table.draw(); });
      $('#min_create, #max_create, #min_update, #max_update').click( function() { table.draw(); });
      $('#min_create').datepicker().bind('onClose', function(){ table.draw(); });
  });

min_create、max_create、min_update和max_update都是具有datepicker类的输入。search_table是我的表,它是DataTable。


共2个答案

匿名用户

我从这个jsfiddle获得了另一个替代方案https://jsfidle.net/bindrid/2bkbx2y3/6/

       $.fn.dataTable.ext.search.push(
          function (settings, data, dataIndex) {
        var min = $('#min').datepicker("getDate");
        var max = $('#max').datepicker("getDate");
        var startDate = new Date(data[4]);
        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;
    }

匿名用户

我有两个问题,当修复解决了我的问题。

在我的准备工作中,我

var table = $('#search_table').DataTable();

这应该是

var table = $('#search_table').dataTable();

然后,在我的datepicker类的代码中

  $(".datepicker").datepicker( {
      maxDate:0,
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
      onClose: function(selectedDate) {
          table.draw();}});

并且需要将其更改为

  $(".datepicker").datepicker( {
      maxDate:0,
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
      onClose: function(selectedDate) {
          table.fnDraw();}});