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

Question

我想要做的是，如果组合框中的值发生变化，则修改数据表的 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”)点，但它不会重绘表格。我如何让它工作？

Answer 1

说明

要使用数据表 API，您首先需要有一个句柄。 .dataTable 函数返回创建的数据表的句柄。
所以，这样做

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

oTable.fnDraw();

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

<小时/>

信息

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

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

但是，您可以尝试使用 fnServerData 函数在请求发送之前拦截请求，然后在发生更改时使用您自己的 url 更新表。
或者
您可以销毁该表并重新初始化它。

要了解有关 fnServerData 的更多信息，click here并搜索“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您必须处理所有事情，这意味着它也使所有事情变得复杂!

编码愉快! :)