datatables data filter

Question

Mam jedną kolumnę Data, sformatowaną '17/03/2012 '.

Chciałbym mieć możliwość wyboru daty początkowej i końcowej, a jeśli powyższa kolumna z 1 datą mieści się w tym zakresie dat, spowoduje odfiltrowanie kolumny.

Poniżej jest im kod za pomocą:

 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> 

Wszelkie porady pomaga na to by BVE niezwykle pomocne. Z góry dziękuję.

Answer 1

myślę, że przykład, który jest pokazany na filter API page rade:

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

Co rozszerzenie filtrowanie zakres zostały dołączone do góry ponad szuka to zestaw pól wejściowych (prawdopodobnie datepicker tekstowych stylu będzie działać najlepiej). Powinieneś przekazać im identyfikatory według tego, co widzę w Twoim kodzie, dateStart i dateend. Następnie możesz związać function() { oTable.fnDraw(); } z jakimś zdarzeniem na jednym z tych pól (jak w powyższym kodzie, są one związane z wydarzeniem keyup) lub może to być przycisk filtru lub cokolwiek innego.

Ale teraz, za każdym razem, że tabela jest zasysane (używając fnDraw()) weźmie pod uwagę te dat i filtrować zera iStartDateCol i iEndDateCol kolumn opartych na tym przedziale.

UPDATE: bardziej bezpośrednią odpowiedź - po prostu obejmują następujące w document.ready funkcji:

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

Answer 2

Jeśli chcesz filtrować DataTable na podstawie zakresu dat, można spróbować ta funkcja:

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

to jest bardzo proste, aby dostosować tę funkcję, aby to działało na inny termin formatach.

Answer 3

znalazłem rozwiązanie bez użycia wtyczki (użyłem to również do filtrowania tabeli według słowa kluczowego)

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