Question

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

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

我使用什么功能强制数据贴纸重新绘制表格？在我的ready函数中，我有以下代码：

      $(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。

Answer 1

我从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 2

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

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

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

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

大家好请找到我的代码以供参考，以处理daterangepicker筛选数据表，这对其他正在努力寻找相似解决方案的人将有所帮助。以下是许多日期选择器问题的通用解决方案，请找到我所附的代码以供参考。

comments = db.relationship('Comments',backref='user',lazy='dynamic')

work = db.relationship('Work',backref='user',uselist=False

/*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;

}

使用DatePicker过滤DataTable

4 个答案: