фильтр датированных данных

Question

У меня есть один столбец даты, отформатированный '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>

Любая помощь по этому вопросу была бы чрезвычайно полезной. Заранее спасибо.

Answer 1

Я думаю, что пример, показанный на странице 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(); } );
} );

То, что ищет расширение фильтрации диапазона, которое вы включили выше, - это набор полей ввода (вероятно, текстовые поля стиля datepicker будут работать лучше всего). Вы должны дать им идентификаторы, согласно тому, что я вижу в вашем коде, dateStart и dateend. Затем вы можете связать function() { oTable.fnDraw(); } с каким-либо событием в любом из этих блоков (как в коде выше, они связаны с событием keyup), или это может быть кнопка фильтра или что-то еще.

Но теперь, каждый раз, когда таблица рисуется (используя fnDraw()), она будет учитывать эти даты и фильтровать столбцы iStartDateCol и iEndDateCol с нулями на основе этого диапазона.

ОБНОВЛЕНИЕ: более прямой ответ - просто включите следующее в вашу функцию document.ready:

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

Answer 2

Если вы хотите отфильтровать таблицу данных на основе диапазона дат, вы можете попробовать эту функцию:

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

Настроить эту функцию очень просто, чтобы она работаладля разных форматов даты.

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