How to correctly reload data from web method using JQuery DataTables?

问题

I'm using JQuery DataTables plug-in to work with my tables and recently I switched to server-side pagination and filtering. In particular, I have a web method that return data to populate customers table:

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

and in my page I use this code to retrieve data via AJAX calls.

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

As you can see, I'm passing to the web method two parameters: jsonAOData, with all the information for pagination and filtering, and mode, that defines how to fetch data from DB. It works perfectly, but now I need to reaload data in my table passing to my web method a different value for mode.

Reading docs I found fnReloadAjax() function could help me, but I cannot find the correct way to apply it to my problem.

I tried this way:

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

but it does't work. Can you help me? Where I'm doing wrong?

How can I pass the new argument to my web-method?

回答1:

Can't immediately spot what is missing/wrong - but this is my version that works.

$(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:

I discovered fnReloadAjax() doesn't work so good for me. So following some forums I decided to use fnDraw().

I defined a global variable mode that I valorize according to data I want to retrieve. Then I invoke fnDraw(). The table is re-drawn loading data from the web method.

In AJAX call I set:

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

来源：https://stackoverflow.com/questions/14377117/how-to-correctly-reload-data-from-web-method-using-jquery-datatables

标签

jquery

ASP.NET

ajax

jquery-datatables