如何修改查询数据表的Ajax网址? [英] How do I modify ajax url of a query datatable?

问题描述

如果组合框中的值发生更改，我想做的就是修改数据表的sAjaxSource，然后我要调用数据表的fnDraw()函数

What I want to do is to modify the sAjaxSource of the datatable if a value in combo box changes and then I want to call the fnDraw() function of the datatable

数据表为:

 $("#example").dataTable({
             "aoColumns": [
                     { "sTitle": "Id" },
                      { "sTitle": "Name" }],


             "bProcessing": true,
             "bServerSide": true,

             "sAjaxSource": '@Url.Action("FetchData", "Home")',
             "sPaginationType": "full_numbers",

});

到目前为止，我有: C#代码:

What I have so far is: C# code:

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

用于更改值的javascript代码是:

And the javascript code for change of value is:

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

它达到了alert("Hi")点，但没有重绘该表.我如何使它工作?

It reaches alert("Hi") point but it doesn't redraw the table. How do I get it to work?

推荐答案

说明

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

Explanation

To use the API for datatables you need to have a handle first. The .dataTable function returns a handle to the datatable created.
So, doing this

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

oTable.fnDraw();

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

should allow you to access and execute the functions for a specific table.

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

Datatables doesn't support changing the settings after it's been initialized, and for a good reason.

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

但是，您可以尝试使用fnServerData函数在发送请求之前对其进行拦截，然后只要发生更改，就使用您自己的url更新表.
或
您可以销毁该表并重新初始化它.

However, you could try using the fnServerData function to intercept the request before it is sent, and then just update the table with your own url whenever the change occur.
Or
You could destroy the table and reinitialize it.

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

To learn more about fnServerData, click here and search for "fnServerData".

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

I'm unsure whether or not this actually works, I haven't done it before, but it should work.

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()
});

---

替代解决方案

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

---

Alternative Solution

An alternative would be to destroy the table and then reinitialize it with the new settings. This is, however, a very ineffective way of handling it.

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 时，您必须照顾好一切，这也意味着一切都变得复杂了！

---

Sidenote

When you've got bServerSide = true you have to take care of everything, and that means it complicates everything too!

祝您编程愉快！ :)

这篇关于如何修改查询数据表的Ajax网址?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！