使用 DatePicker 过滤 DataTable

Question

我的页面中有一个名为 'search_table' 的数据表。我在 table 中有一个额外的 header 行，它有不同的过滤器选项（下拉列表、文本、date_pickers）。对于日期列，我有两个日期选择器，一个用于最小值，一个用于最大值。我可以根据日期选择器过滤数据table，但有一个问题：

当我 select 一个日期时，我的 table 中的所有行都消失了，我必须单击其中一个 header 来获取要出现的数据。一旦我这样做，就会显示正确的数据（日期在最小值和最大值之间）。

我使用什么功能来强制数据选择器 re-draw table？在我准备好的函数中，我有以下代码：

      $(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 都是具有日期选择器 class 的输入。 search_table 是我的 table 那是一个数据表。

Answer 1

我有两个问题，解决后解决了我的问题。

在我准备好的函数中，我有

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

这应该是

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

然后，在日期选择器的代码中 class 我有

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

Answer 2

我从这个 jsfiddle 得到了另一种选择 https://jsfiddle.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;
    }

Answer 3

enter code here $.fn.dataTableExt.afnFiltering.push(
    function (oSettings, aData, iDataIndex) {

        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1;
        var yyyy = today.getFullYear();

        if (dd < 10)
            dd = '0' + dd;

        if (mm < 10)
            mm = '0' + mm;

        today = mm + '/' + dd + '/' + yyyy;


        var Min_temp = '';
        var Max_temp = '';
        if ($('input[name="datefilter"]').val() == '') {
            Min_temp = '01/01/1980';
            Max_temp = today;

        } else {

            var arr_date = $('input[name="datefilter"]').val().split("-");
            Min_temp = arr_date[0].replace(' ', '');
            Max_temp = arr_date[1].replace(' ', '');

        }
        var arr_min = Min_temp.split("/");
        var arr_max = Max_temp.split("/");
        var arr_date = aData[2].split("/");

        var iMin = new Date(arr_min[2], arr_min[0], arr_min[1], 0, 0, 0, 0)
        var iMax = new Date(arr_max[2], arr_max[0], arr_max[1], 0, 0, 0, 0)
        var iDate = new Date(arr_date[2], arr_date[0], arr_date[1], 0, 0, 0, 0)


        if (iMin == "" && iMax == "") {
            return true;
        }
        else if (iMin == "" && iDate < iMax) {
            return true;
        }
        else if (iMin <= iDate && "" == iMax) {
            return true;
        }
        else if (iMin <= iDate && iDate <= iMax) {
            return true;
        }
        return false;

    }
);

过滤器是这个

  $('input[name="datefilter"]').daterangepicker({
        autoUpdateInput: false,
        maxDate: today,
        locale: {
            cancelLabel: 'Borrar',
            applyLabel: 'Aceptar',
            daysOfWeek: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
            monthNames: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']


        }
    });

Answer 4

大家好请找到我的代码以供参考，以处理日期范围选择器以过滤数据表，这对正在努力寻找类似解决方案的其他人会有帮助。以下是很多日期选择器问题的通用解决方案，请参考我附上的代码。

/*named as styles.css in link tag in html save it the same way to get the result */
#calendar{
        position: center;
        margin-top: 200px;
}

#tabledata{
 margin-top:50px;
 margin-right: 120px;
 margin-left: 120px;

}

<html>
<head>
    <title>Search date from table</title>

<!-- data table -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

<!-- date range picker -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


<!-- #region datatables files -->
<!-- <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
 --><script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- #endregion -->


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="styles.css">



</head>
<body>

<div id="calender" align="center">

<div id="reportrange" class="btn btn-success btn-lg" align="center">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span> <i class="fa fa-caret-down"></i>
</div>


</div>

<div id="tabledata">

<table id="example" class="display" width="100%"></table>

</div>



<script type="text/javascript">

$(document).ready(function() {

  $(function() {
    var start = moment("2019-01-01 12:34:16");
    var end = moment("2020-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);//date rangepicker ends here

    cb(start, end);

  }); 
 

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


      $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min = start;
      var max = end;
      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;
    }
  ); //external search ends here

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


        }); // report range ends here


var table = $('#example').DataTable({
    "order": [
      [0, "desc"]
    ],
    lengthChange: false,
    data: dataSet,
    columns: [{
        title: "Name"
      },
      {
        title: "Position"
      },
      {
        title: "Office"
      },
      {
        title: "Extn"
      },
      {
        title: "Start date"
      },
      {
        title: "Salary"
      },
      

    ]
  }); //table var ends here




});// ready function ends here
 


   var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2019/04/25", "0,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2019/07/25", "0,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562","2020/01/12", ",000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "3,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "2,700" ],
    [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "2,000" ],
    [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2020/08/06", "7,500" ],
    [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "7,900" ],
    [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2020/09/15", "5,500" ],
    [ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "3,600" ],
    [ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", ",560" ],
    [ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "2,000" ],
    [ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "0,600" ],
    [ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2020/12/18", "3,500" ],
    [ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "5,750" ],
    [ "Michael Silva", "Marketing Designer", "London", "1581", "2020/11/27", "8,500" ],
    [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "5,000" ],
    [ "Gloria Little", "Systems Administrator", "New York", "1721", "2020/04/10", "7,500" ],
    [ "Bradley Greer", "Software Engineer", "London", "2558", "2020/10/13", "2,000" ],
    [ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2020/09/26", "7,500" ],
    [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2019/09/03", "5,000" ],
    [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2020/06/25", "5,000" ],
    [ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2019/12/12", "6,450" ],
    [ "Doris Wilder", "Sales Assistant", "Sydney", "3023", "2010/09/20", ",600" ],
    [ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2020/10/09", ",200,000" ],
    [ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", ",575" ],
    [ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "7,650" ],
    [ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2019/06/07", "6,850" ],
    [ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "0,000" ],
    [ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2019/08/14", "3,000" ],
    [ "Michelle House", "Integration Specialist", "Sydney", "2769", "2019/06/02", ",400" ],
    [ "Suki Burks", "Developer", "London", "6832", "2020/10/22", "4,500" ],
    [ "Prescott Bartlett", "Technical Author", "London", "3606", "2019/05/07", "5,000" ],
    [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "5,500" ],
    [ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2019/03/09", "4,050" ],
    [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2020/12/09", ",675" ]
];
 
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );


} );

</script>

</body>
</html>

使用 DatePicker 过滤 DataTable

Use DatePicker to filter DataTable

javascript

datatable

jquery

datepicker