需要使用日期选择器按日期范围过滤数据表列

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;
        },
...
});
}