如何使用JQuery DataTables從Web方法正確重新加載數據？

Question

我使用JQuery DataTables插件來處理表，最近我切換到服務器端分頁和過濾。 特別是，我有一個Web方法，該方法返回數據以填充客戶表：

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetCustomers(string jsonAOData, int mode)
    {
        // ...
    }

在我的頁面中，我使用此代碼通過AJAX調用來檢索數據。

var grid = $('#grid').dataTable({
        bJQueryUI: true,
        bLengthChange: false,
        iDisplayLength: listItemsPerPage,
        bDestroy: true,
        "bProcessing": true,
        "bSort": true,
        "sPaginationType": "full_numbers",
        "bServerSide": true,
        "sAjaxSource": "/wsData/GetData.asmx/GetCustomers",
        "fnServerData": function (sSource, aoData, fnCallback) {

            var jsonAOData = JSON.stringify(aoData);

            $.ajax({
                //dataType: 'json', 
                contentType: "application/json; charset=utf-8",
                type: "POST",
                url: sSource,
                data: "{jsonAOData : '" + jsonAOData + "', mode:'0'}",
                success: function (msg) {
                    fnCallback(JSON.parse(msg.d));
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.responseText);
                }
            });
        },
        "aoColumnDefs": [
            // my columns structure
        ]
    });

如您所見，我將兩個參數傳遞給Web方法： jsonAOData ，其中包含所有用於分頁和過濾的信息，以及mode ，它們定義了如何從數據庫獲取數據。 它可以完美運行，但是現在我需要重新加載表中的數據，並將mode的另一個值傳遞給Web方法。

閱讀文檔時，我發現fnReloadAjax()函數可以幫助我，但是我找不到將其應用於問題的正確方法。

我這樣嘗試：

grid.fnReloadAjax("/wsData/GetData.asmx/GetCustomers?mode=1");

但它不起作用。 你能幫助我嗎？ 我在哪里做錯了？

如何將新參數傳遞給我的網絡方法？

Answer 1

無法立即發現缺失/錯誤的地方-但這是我的版本。

$(document).ready(function () {
        jQuery.support.cors = true;

        var sAjaxSourceUrl = '@ViewBag.sAjaxSourceUrl' //passing mine from MVC3 viewbag, but you can hard-code it
        var dt = $('#dataTable').dataTable({
            "bProcessing": true,
            "bSort": true,
            "bServerSide": true,
            "sServerMethod": "POST",
            "sAjaxSource": sAjaxSourceUrl,
            "fnServerData": function (sSource, aoData, fnCallback) {
                var jsonAOData = JSON.stringify(aoData);
                $.ajax({
                    crossDomain: true,
                    type: "POST",
                    url: sSource,
                    data: jsonAOData,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        fnCallback($.parseJSON(data));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("Status: " + XMLHttpRequest.status + "\r\n" + textStatus + "\r\n" + errorThrown);
                    }
                });
            },
            "aoColumnDefs": [
// my columns structure
],
            "sScrollY": "500",
            "bScrollCollapse": true
        });

Answer 2

我發現fnReloadAjax()對我不起作用。 因此，在一些論壇之后，我決定使用fnDraw() 。

我定義了一個全局變量mode ，該mode根據要檢索的數據進行評估。 然后我調用fnDraw() 。 該表是從Web方法中重新繪制的加載數據。

在AJAX通話中，我設置了：

data: "{jsonAOData : '" + jsonAOData + "', mode:'" + mode +"'}",