datatables date filter

Question

'17/03/2012 'の形式の日付列が1つあります。

私は、開始日と終了日を選択できるようにしたいと思います。上記の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でしょう。前もって感謝します。私はfilter API pageに示しています例は、トリックを行うだろうと思い

Answer 1

：

$(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と表示されているIDのIDを渡す必要があります。次に、function() { oTable.fnDraw(); }をこれらのボックスのいずれかのイベントにバインドすることができます（上のコードのように、それらはkeyupイベントにバインドされています）。または、フィルタボタンなどです。

ただし、テーブルが（fnDraw()を使用して）描画されるたびに、それらの日付が考慮され、その範囲に基づいてゼロベースのiStartDateColとiEndDateColの列がフィルタリングされます。

UPDATE：より直接的な答え - ちょうどあなたの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(); 
}