datatables date filter

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> 

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

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

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

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

UPDATE: более прямой ответ - просто включите его в вашем document.ready функции:

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

Answer 2

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

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