需要按日期範圍過濾datatable列datepicker

Question

我想過濾我的出生日期列在數據表中使用Jquery Datepicker。 但它對我來說太難了，我無法在網上找到好的例子。 請解釋我可以做些什麼。提前致謝。

代碼：

 <form class="form-inline" > 
      <div class="form-group"> 
      <label for="exampleInputEmail2">From </label> 
      <input type = "text" class="form-control" id = "datepicker1" name= "date1" placeholder="From Date"/> 
      </div> 
      <div class="form-group"> 
      <label for="exampleInputEmail2">To </label> 
      <input type = "text" class="form-control" id = "datepicker2" name= "date2" placeholder="To Date"/> 
      </div> 
     </form> 
     <table id="formdata4" class="table table-bordered table-hover nowrap"> 
       <thead> 
       <tr style="border-color:black"> 
        <th> ID </th> 
        <th> Name </i></a></th> 
        <th> Email </th> 
        <th> Age </th> 
        <th> Gender </th> 
        <th> D.O.B </th> 
        <th> Address </th> 
        <th> City </th> 
        <th> Skills </th> 
        <th> Action </th> 
       </tr> 
       </thead> 
     </table> 
    <script> 
     var table1; 
     $(document).ready(function(){ 
       //$("#datepicker1").datepicker({ dateFormat: 'yy-mm-dd', defaultDate: null }); 
       //$("#datepicker2").datepicker({ dateFormat: 'yy-mm-dd', defaultDate: null }); 
         $(function() { 
          $("#datepicker1").datepicker({dateFormat: 'yy-mm-dd'}); 
         }); 

         $(function() { 
          $("#datepicker2").datepicker({dateFormat: 'yy-mm-dd'}); 
         }); 

     table1 = $('#formdata4').dataTable({ 
           "ajax":{ 
            "url": "dataTable.php", 
            "dataSrc":"" 
            }, 
           "columns": [ 
            { "data": "user_id" }, 
            { "data": "name" }, 
            { "data": "email" }, 
            { "data": "age" }, 
            { "data": "gender" }, 
            { "data": "dob" }, 
            { "data": "address" }, 
            { "data": "city" }, 
            { "data": "skill" }, 
            { "data": "button" }, 
            ] 
           }); 

          //table1.columnFilter({ sPlaceHolder: "head:before", 
          //aoColumns: [{ type: "text" }, 
          //{ type: "date-range", sRangeFormat: "Between {from} and {to} dates" } 
          //] 
          //  }); 
          //$('#datepicker1').change(function() { table1.fnDraw(); }); 
          //$('#datepicker2').change(function() { table1.fnDraw(); });    
    }); 
        $('#datepicker1').on('change', function() {       
        $('#formdata4').dataTable().fnFilter(this.value, 5); 
        }); 
// $('#datepicker1, #datepicker2').on('change', function() { 
// var start =$('#datepicker1').val(); 
// var end =$('#datepicker2').val(); 
// table1.column(5).search(start, end).draw(); 
//}); 
       //$.datepicker.regional[""].dateFormat = 'dd/mm/yy'; 
       //$.datepicker.setDefaults($.datepicker.regional['']); 
     </script> 

有人幫

Answer 1

首先，你添加一個按鈕（搜索）當你在搜索按鈕點擊，然後獲取日期值，並傳遞給數據表功能 例如，

$(document).ready(function() { 
    bindGrid('',''); 
     $("#btnID").click(function() { 
      try { 
       var parameter1 = $('#txtFromDate').val(); 
       var parameter2 = $('#txtToDate').val(); 
       bindGrid(parameter1,parameter2); 
      } catch (e) { 
      } 

     }); 
}); 

function bindGrid(parameter1,parameter2) { 
$('#formdata4').dataTable({ 
... 
"sAjaxSource": "dataTable.php", 
     "fnServerParams": function (aoData) { 
      aoData.push({ "name": "FromDate", "value": parameter1 },{"name":"ToDate","value":parameter2}); 
      perm = aoData; 
     }, 
... 
}); 
}