[英]need to filter datatable column by date range with datepicker
我正在嘗試使用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>
有人請幫忙
首先,當您單擊搜索按鈕時添加一個按鈕(搜索),然后獲取日期值並傳遞給數據表函數。例如,
$(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;
},
...
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.