datatables日期篩選器

Question

我有一個日期列，格式爲'17/03/2012'。

我希望能夠選擇一個開始日期和結束日期，如果上面的1日期列在此日期範圍內，它將過濾該列。

以下是使用代碼IM：

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

什麼你上面包含了一系列過濾擴展尋找的是一組輸入框（大概日期選擇器樣式文本框會最好）。你應該給他們的ID，通過我在你的代碼中看到的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(); 
}