I'm using jQuery DataTables, my JavaScript code is shown below:
$(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"]
]
});
});
I want to filter this dataTable according to the selected value of a select element :
$("#select_id").on("change", function(){
// set the ajax option value of the dataTable here according to the select's value
});
How to set the ajax
option's value of the dataTable
in the on_change
event of the select
element based on the select's selected item ?
Use ajax.url()
API method to set the URL that DataTables uses to Ajax fetch data.
$("#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();
});
Use ajax.data
option to add or modify data submitted to the server upon an Ajax request.
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();
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With