使用日期选择器更改 ajax 请求中的参数值
change parameter value in ajax request using datepicker
我已经使用 JQuery 数据 table 实现了服务器端分页,现在我想使用日期选择器提取记录。当我 select date from date picker 时,这个值进入搜索过滤器字段而不是我想要的字段(下面代码中的 dob1)。在初始化 table 之后,我们如何将值 select 从日期选择器设置为 ajax 请求。我正在使用 data-tables 版本 1.10
<div class="with-sidebar">
<m:box title=" box1">
<m:box>
<div class="filter">
<p>
Search Data: <input type="text" id="filtertext" placeholder="Filter...">
Select deadLine : <input id="dob1" name="dob1" type="text">
</p>
</div>
<table id="example" style="background-color: #edf1fa"
class="display compact cell-border">
<thead>
<tr>
<th>name</th>
<th>dob</th>
</tr>
</thead>
</table>
</m:box>
</m:box>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
"processing": true,
"serverSide": true,
"pagingType": "simple",
'sDom' : '<"top"lp>rt<"bottom"lp><"clear">',
ajax: {
url: 'jsonsrc.json',
dataType: 'json',
type: 'GET',
'data': {
dob:null ///how to change this with datepicker value
},
},
"columns": [
{"data": "name"},
{"data": "dob"},
],
});
var searchDelay = null;
$("#filtertext").on('keyup', function(e) {
var search = this.value;
if (e.keyCode == 13 || search == "") {
table.search(search).draw();
}
});
$("#dob1").on( 'click change', function () {
var i =$(this).attr('id'); // getting column id
var v =$(this).val(); // getting search input value
//table.search(v).draw();
$("#dob1").val(v);
table.columns(1).search(v).draw();
} );
$( "#dob1" ).datepicker({
dateFormat: "yy-mm-dd",
showOn: "button",
showAnim: 'slideDown',
showButtonPanel: true ,
autoSize: true,
buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
closeText: "Clear"
});
});
</script>
方法我整理好了,给data元素加一个函数,设置table个需要设置的元素就可以了
data: function ( d ){
d.dob=$("#dob1").val()
}
检查此以了解更多详细信息。
https://datatables.net/reference/option/ajax.data
我已经使用 JQuery 数据 table 实现了服务器端分页,现在我想使用日期选择器提取记录。当我 select date from date picker 时,这个值进入搜索过滤器字段而不是我想要的字段(下面代码中的 dob1)。在初始化 table 之后,我们如何将值 select 从日期选择器设置为 ajax 请求。我正在使用 data-tables 版本 1.10
<div class="with-sidebar">
<m:box title=" box1">
<m:box>
<div class="filter">
<p>
Search Data: <input type="text" id="filtertext" placeholder="Filter...">
Select deadLine : <input id="dob1" name="dob1" type="text">
</p>
</div>
<table id="example" style="background-color: #edf1fa"
class="display compact cell-border">
<thead>
<tr>
<th>name</th>
<th>dob</th>
</tr>
</thead>
</table>
</m:box>
</m:box>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
"processing": true,
"serverSide": true,
"pagingType": "simple",
'sDom' : '<"top"lp>rt<"bottom"lp><"clear">',
ajax: {
url: 'jsonsrc.json',
dataType: 'json',
type: 'GET',
'data': {
dob:null ///how to change this with datepicker value
},
},
"columns": [
{"data": "name"},
{"data": "dob"},
],
});
var searchDelay = null;
$("#filtertext").on('keyup', function(e) {
var search = this.value;
if (e.keyCode == 13 || search == "") {
table.search(search).draw();
}
});
$("#dob1").on( 'click change', function () {
var i =$(this).attr('id'); // getting column id
var v =$(this).val(); // getting search input value
//table.search(v).draw();
$("#dob1").val(v);
table.columns(1).search(v).draw();
} );
$( "#dob1" ).datepicker({
dateFormat: "yy-mm-dd",
showOn: "button",
showAnim: 'slideDown',
showButtonPanel: true ,
autoSize: true,
buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
closeText: "Clear"
});
});
</script>
方法我整理好了,给data元素加一个函数,设置table个需要设置的元素就可以了
data: function ( d ){
d.dob=$("#dob1").val()
}
检查此以了解更多详细信息。 https://datatables.net/reference/option/ajax.data