如何修改查询数据表的ajax url
本文关键字:数据表 ajax url 查询 何修改 修改 | 更新日期: 2023-09-27 18:19:05
我想做的是修改数据表的sAjaxSource,如果组合框中的值发生变化,然后我想调用数据表的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")点,但它不重新绘制表。我怎么让它工作?
说明
要为数据表使用API,首先需要有一个句柄。.dataTable
函数返回创建的数据表的句柄。
因此,执行
var oTable = $("#example").dataTable({
...
});
oTable.fnDraw();
应该允许您访问和执行特定表的函数。
<标题>
datatable在初始化后不支持更改设置,这是有原因的。
//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
你必须照顾一切,这意味着它复杂的一切!
编码快乐!:)
标题>标题>标题>