如何修改查询数据表的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();

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

---

信息

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

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

但是，您可以尝试使用fnServerData函数在发送请求之前拦截请求，然后只要发生更改，只需使用您自己的网址更新表格。
或
你可以销毁表并重新初始化它。

要了解有关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 时，必须照顾好一切，这意味着它也会使一切变得复杂！

快乐的编码！ ：）