如何修改查询数据表的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")点,但它不重新绘制表。我怎么让它工作?

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

说明

要为数据表使用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 必须照顾一切,这意味着它复杂的一切!

编码快乐!:)