Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question
add comment

2 Answers

up vote 0 down vote

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
        });
share|improve this answer
 
Note: mine has cross-domain settings in there...but they make no (user noticeable) difference on a same-domain call. –  BlueChippy Jan 17 '13 at 10:44
add comment
up vote 0 down vote accepted

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 +"'}",
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.