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

首先，当您单击搜索按钮然后获取日期值并传递给datatable函数时，添加一个按钮（搜索）例如，

a = a + b

需要使用datepicker按日期范围过滤数据表列

1 个答案: