在两个日期选择器之间过滤数据表

Question

我只想在用户选择两个日期选择器之间的日期时过滤我的数据表。我尝试了一个代码，但是当我选择一个日期时它没有显示。任何人都知道如何修复我的代码？非常感谢！

这是我尝试过的：

function implement_cm_table() {
    var table = $('#show-cm-table').DataTable({
        autoWidth: false,
        responsive: true,
        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
        language: {
            search: '<span>Search</span> _INPUT_',
            lengthMenu: '<span>Show:</span> _MENU_',
            paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
        }
    });

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

    $('#min').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
    $('#max').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

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

Answer 1

您可以对代码进行以下更改：

1. 将您的实现函数包装在文档就绪函数中：

<script type="text/javascript">
  $(document).ready(function() {
    implement_cm_table();
  } );
</script>

1. 在此处将min 和max 选择器名称更改为from 和to：

    $('#from').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
    $('#to').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

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

1. 现在，您已经在 2 个不同的地方声明了每个日期选择器。因此，您需要删除此处的初始代码：

  <script type="text/javascript">
    $('#from').datepicker({ dateFormat: 'yy-mm-dd' });
    $('#to').datepicker({ dateFormat: 'yy-mm-dd' });
  </script>

...而是将这些日期格式化程序添加到其他 datepicker 声明中，朝向脚本的底部：

    $('#from').datepicker({ dateFormat: 'yy-mm-dd', onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
    $('#to').datepicker({ dateFormat: 'yy-mm-dd', onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

对我的代码版本进行这些更改后，过滤开始正常工作。

基本上，需要文档准备功能来确保页面准备好初始化 DataTables。然后您需要修复错误的日期选择器选择器，并确保每个选择器只声明一次。