logo标签列表

DataTables日期筛选器

jqueryjquery-pluginsdatatablesdate-rangedaterangepicker
5

我有一个日期列，格式为“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>

任何关于此事的帮助和建议都将非常有用。提前感谢。
3个回答
6
我认为在筛选 API 页面中展示的示例可以解决问题：
$(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(); } );
} );

你上面包含的范围过滤器扩展程序正在寻找一组输入框（可能是日期选择器样式的文本框）。根据你代码中的内容，应该为它们分配ID，如dateStart和dateend。然后，你可以将function() { oTable.fnDraw(); }绑定到这些框的某个事件上（例如在上面的代码中，它们绑定到keyup事件），或者可以是筛选按钮或其他任何东西。
但现在，每次使用fnDraw()绘制表格时，它都会考虑到这些日期，并根据该范围过滤基于零的iStartDateCol和iEndDateCol列。
更新：更直接的答案 - 只需在你的document.ready函数中包含以下内容：
$('#dateStart').keyup( function() { oTable.fnDraw(); } );
$('#dateend').keyup( function() { oTable.fnDraw(); } );
我已經在我的程式碼中加入這個，但它仍然無法運行。我已將我的問題更新為完整的代碼。 - Codded
@Codded 所以我认为问题出在日期格式/解析上。该扩展名正在使用两行代码手动解析日期字符串，看起来像是 iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2)。从他那里的代码来看，他似乎期望的是 MM/DD/YYYY 格式的内容。我建议您将扩展名更改为某些不那么严格的东西，例如实际的解析器，可以处理多种格式，就像您所描述的那样。我认为本地 JavaScript 日期对象具有内置的解析方法，如果您使用 jQueryUI - 他们的日期选择器也有。 - mbeasley
我再次修改了我的答案，处理了日期和ifini等内容。过滤器正在工作，但是当我选择日期时，表格只有在我点击排序列时才会重新绘制，它没有初始化绘制。我使用的是daterangepicker插件。 - Codded
@Codded 看起来你的监听器没有触发。两个想法：首先 - 你可以为daterangepicker中的onChange: function选项设置一个函数，在这个部分放置你的表格重绘。我会在表格的"fnDrawCallback": function(oSettings) {}选项中放置一个console.log('redraw');或者其他东西，以查看何时进行了重绘。如果上述方法不起作用，第二件我会考虑的事情是在你的监听器中使用live或on。 - mbeasley
抱歉，我找到了一个简单的答案，开始的$oTable前面缺少了$符号 - $('#dateStart').keyup( function() { $oTable.fnDraw(); } ); 现在一切都正常了。感谢您的帮助，非常感激！ - Codded
1
谢谢您提供的参考，它很有帮助。我已经fork了代码并进行了一些优化。 - Jubayer Arefin
0

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

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();
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接