javascript - 数据表日期范围过滤器无法正常工作

Question

我正在尝试在 Datatable 上添加日期范围过滤器，但我无法使其正常工作。日期来自 Mysql 数据库并被选为：

DATE_FORMAT(or_plan_date,'%d-%m-%Y') or_plan_date1

日期格式用于将其从 yyyy-mm-dd 转换为 dd-mm-yyyy。此选择返回类似“01-08-2020”的值

日期显示在第 1 列中，如：

            echo "<tr>";
                echo "<td><a href='view_orders.php?id={$or_id}'>{$or_number}</a></td>";
                echo "<td>{$or_plan_date1}</td>";
                echo "<td>{$order_week1}</td>";
                echo "<td>{$pm_code}</td>";
                echo "<td>{$or_amount}</td>";
                echo "<td>{$de_name}</td>";
                echo "<td>{$cs_name}</td>"; 
                echo "<td>{$or_order_status}</td>";                 
            echo "</tr>";

数据表的 javascript 如下所示：

$(document).ready(function() {
    $('#orders').DataTable( {
        stateSave: true,
        stateDuration: 120,
        dom:    "<'row'<'col-sm-2'l><'col-sm-3'B><'col-sm-4'<'toolbar'>><'col-sm-3'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [{ extend: 'print', text:'<i class="fa fa-print"></i> Print', className: 'btn btn-primary btn-md' }, 
{ extend: 'excel',text:'<i class="fa fa-file-excel"></i> Excel', className: 'btn btn-primary btn-md' },
{ extend: 'pdf',className: 'btn btn-primary btn-md' ,text:'<i class="fa fa-file-pdf"></i> PDF' }] ,
lengthChange: true,
        initComplete: function () {
            this.api().columns([5, 6, 7]).every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.header()) )
                
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
                $( select ).click( function(e) {
                 e.stopPropagation();
           });
            } );
        }
        
    } );
    $("div.toolbar").html('From <input name="min" id="min" type="date"> / <input name="max" id="max" type="date">');

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

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

            // Event listener to the two range filtering inputs to redraw on input
            $('#min, #max').change(function () {
                table.draw();
            });
        
} );

https://jsfiddle.net/onyfw69v/

当前情况是：当我选择一个日期时，表格会刷新但不显示任何值。当我尝试在标题中使用排序时也是如此。当我尝试对任何列进行排序时，所有条目都会消失。

预期结果：当“min”被填满时，它应该过滤日期并显示所有日期的 > min。最大值也是如此，但随后 <max。

谁能告诉我我做错了什么以及应该怎么做？

标签： javascriptphpmysqldatatables

Answer 1

我让它使用以下代码并删除了 sql DATE_FORMAT：

  $("div.toolbar").html('From <input name="min" id="min" type="date" value="0"> / <input name="max" id="max" type="date" value="0">');

  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var min_date = document.getElementById("min").value;
      var min = new Date(min_date);
      var max_date = document.getElementById("max").value;
      var max = new Date(max_date);

      var startDate = new Date(data[1]);
      //window.confirm(startDate);
      if (!min_date && !max_date) {
        return true;
      }
      if (!min_date && startDate <= max) {
        return true;
      }
      if (!max_date && startDate >= min) {
        return true;
      }
      if (startDate <= max && startDate >= min) {
        return true;
      }
      return false;
    }
  );

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

  // Event listener to the two range filtering inputs to redraw on input
  $('#min, #max').change(function() {
    table.draw();
  });