如何修改查询数据表的ajax url？

我想要做的是修改数据表的sAjaxSource，如果combobox中的值更改，然后我想调用数据表的fnDraw（）函数

数据表是：

$("#example").dataTable({ "aoColumns": [ { "sTitle": "Id" }, { "sTitle": "Name" }], "bProcessing": true, "bServerSide": true, "sAjaxSource": '@Url.Action("FetchData", "Home")', "sPaginationType": "full_numbers", }); 

到目前为止我所拥有的是：C＃代码：

 public JsonResult GetData(DataTableParameters param, int? SelectedId) { //return the results } 

并且用于更改值的JavaScript代码是：

  $('#SelectedId').change(function () { alert("Hi"); $("#example").dataTable( {sAjaxSource:"/home/FetchData?SelectedId=1"}).fnDraw(true); ; }); 

它到达警报（“Hi”）点，但它没有重绘表格。 我如何让它工作？

Answer 1

说明

要将API用于数据表，您需要先拥有句柄。 .dataTable函数返回创建的数据表的句柄。
所以，这样做

 var oTable = $("#example").dataTable({ ... }); oTable.fnDraw(); 

应该允许您访问和执行特定表的function。

---

信息

数据表不支持在初始化后更改设置，这是有充分理由的。

 //This does *NOT* work. var oTable = $("#example").dataTable({ ... }); var oSettings = oTable.fnSettings(); oSettings.sAjaxSource = "some_url"; //Nothing will happen oTable.Draw(); 

但是 ，您可以尝试使用fnServerData函数在发送之前拦截请求，然后只要发生更改就用您自己的URL更新表。
要么
你可以破坏表并重新初始化它。

要了解有关fnServerData的更多信息， 请单击此处并搜索“fnServerData”。

---

解

我不确定这是否真的有效，我以前没有做过，但它应该有效。

 var currentSource = "this_url"; var oTable = $('#example').dataTable( { "bServerSide": true, "bProcessing": true, "aoColumns": [ {"sTitle": "id"}, {"sTitle": "name"} ], "sPaginationType": "full_numbers", "sAjaxSource": currentSource, "fnServerData": function ( sSource, aoData, fnCallback ) { $.ajax( { "dataType": 'json', "type": "POST", "url": currentSource, "data": aoData, "success": fnCallback }); } }); $("#SelectedId").change(function)(){ currentSource = "new_url"; oTable.fnDraw(); //or fnReloadAjax() }); 

---

替代方案

另一种方法是销毁表，然后使用新设置重新初始化它。 然而，这是处理它的一种非常无效的方式。

 var initParams = { "bServerSide": true, "bProcessing": true, "aoColumns": [ {"sTitle": "id"}, {"sTitle": "name"} ], "sPaginationType": "full_numbers", "sAjaxSource": "this_url", }; var oTable = $('#example').dataTable(initParams); $("#SelectedId").change(function)(){ oTable.fnDestroy(); initParams.sAjaxSource = "new_url"; oTable = $('#example').dataTable(initParams); }); 

---

边注

当你有bServerSide = true 你必须处理所有事情，这意味着它也会使一切变得复杂！

快乐的编码！ 🙂