jqGrid - server side pager

Question

I am stuck with this issue and will appreciate any help... (Oleg, are you here????)

I have a jqgrid that does sorting, searching on server side, i know need to have pagination also done on the server, i found the webService method that will do that, but when i click on any of the paging buttons nothing happens and the call is not sent to the server.

Can any one help me please and see what i have wrong in my code???

My code is the fallow:

$(myGrid).jqGrid({
    datatype: function (pdata) {
        Invoke("GetAll", pdata);
    },
    colNames: columnNames,
    colModel: columnModel,
    jsonReader: {
        root: "Result",
        page: "page",
        total: "total",
        records: "records"
    },
    rowNum: 10,
    //rowList: [5, 10, 20, 30],
    pager: '#ViewNQueryPager',
    viewrecords: true,
    shrinkToFit: true,
    loadtext: "Loading....",
    emptyrecords: "No records to view",
    viewrecords: true,
    //scrollOffset: 0,
    height: '300',
    //width: '100%',
    ignoreCase: true,
    sortname: 'ID',
    sortable: true,
    sortorder: 'asc',
    grouping: true,
    groupingView: {
        groupField: ['ID']
    }
});
$(myGrid).jqGrid('navGrid', '#ViewNQueryPager', { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true, multipleGroup: true, showQuery: true, onSearch: function (response) { showQueryDetails(); } });
$(myGrid).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
$(myGrid).fluidGrid({ base: '#tableBox', offset: -20 });

function Invoke(action, pdata) {

    var request = new Object();
    if (pdata.filters == undefined && pdata._search == false)
        request.Action = "Sort";
    else {
        if (pdata.filters != undefined && pdata._search == false)
            request.Action = action;
        else request.Action = "Filter";
    }
    if (pdata) {
        request.SortIndex = pdata.sidx;
        request.SortOrder = pdata.sord;
        request.PageNumber = pdata.page;
        request.PageSize = pdata.rows;
        request._search = pdata._search;
        request.filters = pdata.filters;
    }

    var cRequest = new Object();
    cRequest.request = request;

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: 'WebService.asmx/Get',
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        dataType: "json",
        data: JSON.stringify(cRequest),
        success: function (xhrResponse, textStatus) {
            var data = xhrResponse.d;
            var table = $('#ViewNQueryTable');
            table.clearGridData();
            //table.total = data.total;

            for (var i = 0; i < data.Result.length; i++) {
                table.addRowData(i + 1, data.Result[i], 'last');
            }
            $('#totalRecordsFound').html(data.records + " Customers");
            pdata.filters = undefined;
            pdata._search = false;
        },
        error: function (data, textStatus) {
            alert("Error fetching data");
        }
    });
}

I tried adding this:

onPaging: function (which_button) {
        doSomething()
    } 

But it didnt help.

How can i get the paging buttons to call the server method?

EDIT

My web method is this:

[WebMethod]
public kResponse Get(kRequest request)
{
    if (count == 0)
    {
        CurrentList = JsonHelper.GetPersons();
        count++;
    }

    var response = new kResponse();

    switch (request.Action)
    {
        case "GetAll":
            var result = new List<Person>();
            var list = JsonHelper.GetPersons();
            CurrentList = list;
            response.records = CurrentList.Count;
            response.total = response.records / request.PageSize;
            //response.total = list.Count;
            response.page = request.PageNumber;
            for (int i = 0; i < 10; i++)
            {
                result.Add(list[i]);    
            }

            //response.Result = result;
            response.Result = list;

            break;
        case "Filter":
            var filterParams = Filter.Create(request.filters);
            List<Person> FilterdList = GetFilteredList(filterParams);
            CurrentList = FilterdList;
            response.Result = CurrentList;
            response.records = CurrentList.Count();
            response.total = response.records / request.PageSize;
            //response.total = list.Count;
            response.page = request.PageNumber;
            break;

        case "Sort":
            //var listPersons = JsonHelper.GetPersons();
            IQueryable<Person> SortedList = ApplySort(CurrentList.AsQueryable(), request.SortIndex, request.SortOrder);
            CurrentList = SortedList.ToList();
            response.Result = CurrentList;
            response.records = CurrentList.Count();
            response.total = response.records / request.PageSize;
            //response.total = list.Count;
            response.page = request.PageNumber;
            break;
        case "NextPage":
            List<Person> allList = JsonHelper.GetPersons();
            IQueryable<Person> NextPagelist = allList.AsQueryable();
            NextPagelist = NextPagelist.Skip(request.PageNumber * request.PageSize).Take(request.PageSize).AsQueryable();
            response.Result = NextPagelist;
            response.records = NextPagelist.Count();
            response.total = response.records / request.PageSize;
            //response.total = list.Count;
            response.page = request.PageNumber++;


            break;
    }
    return response;
}

with the class:

public class kRequest

public string Action { get; set; }
public int PageSize { get; set; }
public int PageNumber { get; set; }
public string SortIndex { get; set; }
public string SortOrder { get; set; }
public string Search { get; set; }
public bool _search { get; set; }

public string filters { get; set; }

and

public class kResponse

//public int Total { get; set; }
public object Result { get; set; }
public int page { get; set; }
public int total { get; set; }
public int records { get; set; }
//public GridRow[] rows { get; set; }

for doing the pager i am trying this:

$('#next_ViewNQueryPager').click(function () {

    grid.Action = "NextPage";
    triggerReloadGrid();

});

but i am sure this is not the way... what is??

Answer 1

I don't see any requirement to have additional Action parameter. The problem come probably from the misunderstanding which data are requested from the server by jqGrid in every standard request. The problem is that sorting, paging and filtering should be always analyzed and applied by the web server and all the "actions" can be combined together.

For example you show data from the database in the grid having two columns: product name and the unit price of every product. Let us you sort the grid by product name as the initial jqGrid option (sortname is 'ProductName') and you use the default value for rowNum: 20. After the initial grid filling the user set the filter to get products with the price less then $100. In the case the _search parameter will be set to true and the filters will be set to the string where the filter is encoded in JSON format (see the documentation). So the web method of your web service will be called with the parameters _search = true, filters = some value, page = 1, rows = 20, sidx ='ProductName' and sord = 'asc'. Let us the resulting list will be 55 products. So you will have 3 pages of the results and the web service have to return the first page corresponds to the input parameter page = 1. Then the user can type manually 3 as the page number and press Enter or the user can click on the header of the 'Price' column to sort the products by price. In any way ythe web method will receive new request with new values of page, rows, sidx, sord, _search parameters and optionally with the filters parameter.

So the server should always test whether _search is true. In the case the server should apply the filter to the original SQL query which get all products. Then the results have to be always sorted corresponds to the value from sidx and sord parameters. At the end the web server should calculates the total number of the filtered resulting rows and return it as the value of the records output parameter. In the same way the web service should calculates the total number of the filtered pages and return it in the total output parameter. At the end the web service should return up to rows records (one page) based on the values of input parameters page and rows.

I tried to explained that you really don't need to define "GetAll", "Sort", "Filter", "NextPage" etc action and the web service should just always take in consideration all input parameters.

By the way if you want rename and input parameter you can use prmNames (see here). In the old answer I explained how you can implement call of the web service directly using datatype: 'json' instead of datatype as function.