我使用的是jQuery DataTables,我的JavaScript代码如下所示:
$(document).ready(function() {
var tbl = $('#table_tabl').DataTable({
responsive: true,
"oLanguage": {
"sUrl": "<?php echo RP_LANG ?>fr_FR.txt",
},
"processing": true,
"serverSide": true,
ajax: "<?php echo RP_SSP ?>server_processing_reservTables.php", // I want to add a parmeter to it dynamically when a select element is selected
"aoColumnDefs": [{
"aTargets": [3],
"mData": 3,
"mRender": function(data, type, full) {
return '<div style="text-align:center;"><a href="RestaurantReservation/reserverTable/' + data + '" title="Réserver"><span class="mif-lock icon"></span></a></div>';
}
}],
"aLengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "Tout"]
]
});
});
我想根据select元素的选定值过滤此dataTable:
$("#select_id").on("change", function(){
// set the ajax option value of the dataTable here according to the select's value
});
如何根据所选的选项在ajax
元素的dataTable
事件中设置on_change
选项select
的值项目?
答案 0 :(得分:12)
使用ajax.url()
API方法设置DataTables用于Ajax获取数据的URL。
$("#select_id").on("change", function(){
// set the ajax option value of the dataTable here according to the select's value
$('#table_tabl').DataTable()
.ajax.url(
"<?php echo RP_SSP ?>server_processing_reservTables.php?param="
+ encodeURIComponent(this.value)
)
.load();
});
使用ajax.data
选项添加或修改在Ajax请求时提交给服务器的数据。
var tbl = $('#table_tabl').DataTable({
// ... skipped other parameters ...
ajax: {
url: "<?php echo RP_SSP ?>server_processing_reservTables.php",
data: function(d){
d.param = $('#select_id').val();
}
}
});
答案 1 :(得分:6)
我找到了它:
$("#salle_code").on("change", function(){
tbl.ajax.url("<?php echo RP_SSP ?>server_processing_reservTables.php?salle_code="+$(this).val()).load();
});
答案 2 :(得分:2)
数据表版本:1.10.0-beta.1
使用fnDraw
重绘表格。
使用fndraw的示例代码
$(document).ready(function() {
var oTable = $('#example').dataTable();
// Re-draw the table - you wouldn't want to do it here, but it's an example :-)
oTable.fnDraw();
} );
$(document).ready(function() {
var tbl = $('#table_tabl').DataTable({
responsive: true,
"oLanguage": {
"sUrl": "<?php echo RP_LANG ?>fr_FR.txt",
},
"processing": true,
"serverSide": true,
"sAjaxSource": "<?php echo RP_SSP ?>server_processing_reservTables.php", // I want to add a parmeter to it dynamically when a select element is selected
"aoColumnDefs": [{
"aTargets": [3],
"mData": 3,
"mRender": function(data, type, full) {
return '<div style="text-align:center;"><a href="RestaurantReservation/reserverTable/' + data + '" title="Réserver"><span class="mif-lock icon"></span></a></div>';
}
}],
"aLengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "Tout"]
]
});
$("#select_id").change(function () {
var end = this.value;
var NTypSource = '<?php echo RP_SSP ?>server_processing_reservTables?type='+end+'';
var oSettings = tbl.fnSettings();
oSettings.sAjaxSource = NTypSource;
tbl.fnDraw();
});
});