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

Posted 2023-05-09

【中文标题】在两个日期选择器之间过滤数据表

【英文标题】：Filter datatable between two datepickers

【发布时间】：2021-04-13 01:20:56

【问题描述】：

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

这是我尝试过的：

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

【问题讨论】：

嗨，你能让你的代码可运行吗？

我的代码不起作用。当我从两个日期选择器中选择一个日期时，什么也没有发生。

你能帮帮我吗？ @斯瓦蒂

是的，但是首先让你的代码可以运行，然后就很容易解决你的问题。

您是否查看过 DataTables 网站 here 或 Stack Overflow here、here 以及其他答案中提供的解决方案？这些有帮助吗？

【参考方案1】：

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

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

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

在此处将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();
    );

现在，您已经在 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。然后您需要修复错误的日期选择器选择器，并确保每个选择器只声明一次。

【讨论】：

不客气 - 我很高兴它有帮助。对未来的一个小建议：通常不需要在问题或 cmets 中说“请帮助”。获得快速、有用的答案的最佳方法是提出一个写得很好的问题。说“请帮忙”甚至可能适得其反。这是一个由志愿者组成的社区，他们会在空闲时间尽力提供帮助。

你好，我如何在日期选择器中显示今天的日期？谢谢！

你真的应该把这个作为一个新问题来问 - 但这是一种方法：$( "#from" ).datepicker( "setDate", "2020-10-25" );。文档是here。