数据表日期过滤器

Posted 2023-05-09

【中文标题】数据表日期过滤器

【英文标题】：datatables date filter

【发布时间】：2012-04-04 03:55:52

【问题描述】：

我有一个日期列，格式为“17/03/2012”。

我希望能够选择开始和结束日期，如果上面的 1 个日期列在此日期范围内，它将过滤该列。

下面是我使用的代码：

        Start Date: <input type="text" id="dateStart" name="dateStart" size="30">
        End Date: <input type="text" id="dateend" name="dateend" size="30">

    <script type="text/javascript" charset="utf-8">

        $.fn.dataTableExt.afnFiltering.push(
            function( oSettings, aData, iDataIndex ) 
                var iFini = document.getElementById('dateStart').value;
                var iFfin = document.getElementById('dateend').value;
                var iStartDateCol = 2;
                var iEndDateCol = 2;

    iFini=iFini.substring(0,2) + iFini.substring(3,5)+ iFini.substring(6,10)
    iFfin=iFfin.substring(0,2) + iFfin.substring(3,5)+ iFfin.substring(6,10)       

    var datofini=aData[iStartDateCol].substring(0,2) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(6,10);
    var datoffin=aData[iEndDateCol].substring(0,2) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(6,10);


                if ( iFini == "" && iFfin == "" )
                
                    return true;
                
                else if ( iFini <= datofini && iFfin == "")
                
                    return true;
                
                else if ( iFfin >= datoffin && iFini == "")
                
                    return true;
                
                else if (iFini <= datofini && iFfin >= datoffin)
                
                    return true;
                
                return false;
            
        );

$(function() 
    // Implements the dataTables plugin on the html table
    var $oTable= $("#example").dataTable( 
    "sDom": '<"top"><"clear">t<"bottom"i><"clear">',
        "iDisplayLength": 20,       
        "oLanguage": 
            "sLengthMenu": 'Show <select><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select>'
        ,
        "bJQueryUI": true,
        //"sPaginationType": "full_numbers",
        "aoColumns": [
                null,
                null,
                   "sType": "date" 
        ]                    
        );    


    $('#dateStart, #dateend').daterangepicker(
        
        dateFormat: 'dd/mm/yy',
        arrows: true
    

    );        


    /* Add event listeners to the two range filtering inputs */
    $('#dateStart').keyup( function()  oTable.fnDraw();  );
    $('#dateend').keyup( function()  oTable.fnDraw();  );

    /* Add event listeners to the two range filtering inputs */
    $('#dateStart').change( function()  oTable.fnDraw();  );
    $('#dateend').change( function()  oTable.fnDraw();  );

    /* Add event listeners to the two range filtering inputs */
    $('#name').keyup( function()  oTable.fnDraw();  );
    $('#name').change( function()  oTable.fnDraw();  );
);

    </script>

任何关于这方面的帮助建议都会非常有帮助。提前致谢。

【参考方案1】：

我认为filter API page 中显示的示例可以解决问题：

$(document).ready(function() 
    var oTable = $('#example').dataTable();

    /* Add event listeners to the two range filtering inputs */
    $('#min').keyup( function()  oTable.fnDraw();  );
    $('#max').keyup( function()  oTable.fnDraw();  );
 );

您上面包含的范围过滤扩展正在寻找一组输入框（可能日期选择器样式的文本框效果最好）。您应该根据我在您的代码中看到的dateStart 和dateend 给他们ID。然后您可以将function() oTable.fnDraw(); 绑定到其中任何一个框上的某个事件（如在上面的代码中，它们绑定到keyup 事件），或者它可以是一个过滤器按钮或其他任何东西。

但是现在，每次绘制表格时（使用fnDraw()），它都会考虑这些日期并根据该范围过滤从零开始的iStartDateCol 和iEndDateCol 列。

更新：更直接的答案 - 只需在您的 document.ready 函数中包含以下内容：

$('#dateStart').keyup( function()  oTable.fnDraw();  );
$('#dateend').keyup( function()  oTable.fnDraw();  );

【讨论】：

我的代码中已经有了这个，但它仍然不起作用。我已经用完整的代码更新了我的问题。

@Codded 所以我认为问题出在日期格式/解析上。该扩展程序使用看起来像iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2) 的两行手动解析日期字符串。从他那里的情况来看，他似乎在期待 MM/DD/YYYY 格式的东西。我建议您将扩展名更改为不那么严格的东西，也许是一个可以处理多种格式的实际解析器，就像您所描述的那样。我认为原生 javascript 日期对象有一个内置的解析方法，如果你完全使用 jQueryUI - 他们的日期选择器也是如此。

再次修改了我对日期和 ifini 等的答案。过滤器正在工作，但只有在我单击对列进行排序时，表格才会重新绘制。当我选择日期时，它不会开始抽奖。我正在使用 daterangepicker 插件。

@Codded 看来你的听众当时没有开火。两个想法：首先 - 您可以在 daterangepicker 中为 onChange: function 选项设置一个函数，将您的表格重绘放在本节中。我会在表格的"fnDrawCallback": function(oSettings) 选项中添加console.log('redraw'); 或其他内容，以查看何时重绘。如果上述方法不起作用，我会考虑的第二件事是在您的听众中使用 live 或 on。

对不起，我找到了一个简单的答案，缺少 oTable 开头的 $ - $('#dateStart').keyup( function() $oTable.fnDraw(); );现在都在工作。感谢您的帮助，非常感谢！

【参考方案2】：

如果你想根据日期范围过滤数据表，你可以试试这个功能：

https://github.com/hemantrai88/datatables-date_range_filter

自定义此函数以使其适用于不同的日期格式非常简单。

【讨论】：

感谢您的参考，它有帮助。我已经分叉并对代码进行了一些优化。

【参考方案3】：

我找到了一个不使用任何插件的解决方案（我也用它来按关键字过滤表）

function filterTableByDateRange(table) 

    var id = table.attr("id");
// I added class dt to a date-column of table 
    var dates = ($('#' + id + ' td.dt').map(function () 
        return new Date($(this).text());
    ).get());

//Here we init min and max date to be filtered with, if start date or end date is unset we set it to min and max existing dates of our table respectively
    var minSearchDate = $('#date_search_from').val()
        ? new Date($('#date_search_from').val())
        : new Date(Math.min.apply(null, dates));

    var maxSearchDate = $('#date_search_to').val()
        ? new Date($('#date_search_to').val())
        : new Date(Math.max.apply(null, dates));

    var allRows = $("#" + id + " tbody").find("tr");
    if (this.value == "") 
        allRows.show();
        return;
    

    allRows.hide();

    allRows.filter(function (i, v) 
        var currDate = new Date($(this).find(".dt").html());
        if (currDate.setHours(0, 0, 0, 0) >= minSearchDate.setHours(0, 0, 0, 0) &&
            currDate.setHours(0, 0, 0, 0) <= maxSearchDate.setHours(0, 0, 0, 0)) 
            return true;
        
        return false;
    ).show();