javascript 使用 DatePicker 过滤 DataTable

Use DatePicker to filter DataTable

提问by Mark

I have a DataTable named 'search_table' in my page. I have a additional header row in the table that has different filter options (dropdown, text, date_pickers). For the date columns, I have two datepickers, one for min and one for max. I can filter the data for the datatable based on the datepickers, but there is one problem:

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

When I select a date, all the rows in my table disappear, I have to click on one of the headers (like to sort the data) to get the data to appear. Once I do so, the correct data shows (the dates are between min and max).

当我选择一个日期时，表格中的所有行都消失了，我必须单击其中一个标题（例如对数据进行排序）才能显示数据。一旦我这样做，就会显示正确的数据（日期在最小值和最大值之间）。

What functionality do I use to force the datapicker to re-draw the table? In my ready function, I have the following code:

我使用什么功能来强制数据选择器重新绘制表格？在我的就绪函数中，我有以下代码：

      $(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 and max_update are all inputs that have the datepicker class. search_table is my table that is a DataTable.

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

回答by Jomal Johny

I got another alternative from this jsfiddle https://jsfiddle.net/bindrid/2bkbx2y3/6/

我从这个 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;
    }

回答by Mark

I had two issues that when fixed solved my problem.

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

In my ready function, I had

在我准备好的功能中，我有

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

this should have been

这应该是

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

Then, in the code for the datepicker class I had

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

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

and it needs to be changed to

它需要更改为

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

回答by pedro Suarez

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;

    }
);

filtre is this

过滤器是这个

  $('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']


        }
    });