How to set dynamically Ajax url in dataTable?

Question

I am 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&eacute;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 data table according to the selected value of the select element:

 $("#select_id").on("change", function(){ // set the ajax option value of the dataTable here according to the select value }); 

How to set the ajax parameter of the dataTable parameter in the dataTable event of the on_change element based on the selected selected element?

Answer 1

I found him:

 $("#salle_code").on("change", function(){ tbl.ajax.url("<?php echo RP_SSP ?>server_processing_reservTables.php?salle_code="+$(this).val()).load(); }); 

Answer 2

SOLUTION 1

Use the ajax.url() API method to set the URL that DataTables use for Ajax data.

 $("#select_id").on("change", function(){ // set the ajax option value of the dataTable here according to the select value $('#table_tabl').DataTable() .ajax.url( "<?php echo RP_SSP ?>server_processing_reservTables.php?param=" + encodeURIComponent(this.value) ) .load(); }); 

SOLUTION 2

Use ajax.data to add or modify data sent to the server at the request of 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(); } } }); 

Answer 3

Datatable Version: 1.10.0-beta.1 Using fnDraw to redraw a table.

Sample code for using fndraw

 $(document).ready(function() { var oTable = $('#example').dataTable(); // Re-draw the table - you wouldn't want to do it here, but it an example :-) oTable.fnDraw(); } ); 

A source

 $(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&eacute;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(); }); });