如何动态设置dataTable的Ajax URL？

我正在使用jQuery DataTables，我的JavaScript代码如下所示：

$(document).ready(function() { var tbl = $('#table_tabl').DataTable({ responsive: true, "oLanguage": { "sUrl": "fr_FR.txt", }, "processing": true, "serverSide": true, ajax: "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 '
'; } }], "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 }); 

如何根据select的选择项在select元素的on_change事件中设置ajax选项的dataTable值？

Answer 1

解决方案1

使用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( "server_processing_reservTables.php?param=" + encodeURIComponent(this.value) ) .load(); }); 

解决方案2

使用ajax.data选项添加或修改在Ajax请求时提交给服务器的数据。

 var tbl = $('#table_tabl').DataTable({ // ... skipped other parameters ... ajax: { url: "server_processing_reservTables.php", data: function(d){ d.param = $('#select_id').val(); } } }); 

Answer 2

我找到了 ：

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

Answer 3

数据表版本： 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": "fr_FR.txt", }, "processing": true, "serverSide": true, "sAjaxSource": "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 '
'; } }], "aLengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "Tout"] ] }); $("#select_id").change(function () { var end = this.value; var NTypSource = 'server_processing_reservTables?type='+end+''; var oSettings = tbl.fnSettings(); oSettings.sAjaxSource = NTypSource; tbl.fnDraw(); }); });