如何使用 JQuery DataTables 从 Web 方法正确重新加载数据？答案

【问题标题】：How to correctly reload data from web method using JQuery DataTables?如何使用 JQuery DataTables 从 Web 方法正确重新加载数据？
【发布时间】：2013-01-17 10:36:10
【问题描述】：

我正在使用 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，定义如何从 DB 中获取数据。它运行良好，但现在我需要重新加载表中的数据，将 mode 的不同值传递给我的 web 方法。

阅读我发现 fnReloadAjax() 函数的文档可以帮助我，但我找不到将其应用于我的问题的正确方法。

我试过这样：

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

但它不起作用。你能帮助我吗？我哪里做错了？

如何将新参数传递给我的网络方法？

【问题讨论】：

标签： c# jquery asp.net ajax jquery-datatables

【解决方案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
        });

【讨论】：

注意：我的那里有跨域设置......但它们在同域调用中没有（用户明显）差异。

【解决方案2】：

我发现fnReloadAjax() 不适合我。所以在一些论坛之后，我决定使用fnDraw()。

我定义了一个全局变量mode，我根据我想要检索的数据来评估它。然后我调用fnDraw()。从 web 方法加载数据重新绘制表格。

在我设置的 AJAX 调用中：

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

【讨论】：