如果数据来自单独的ajax调用，如何为jqGrid添加服务器端分页？[Trirand JQgrid 4.6]

Question

I need to generate a jqGrid structure that similar to Grouped Header Row Config example in trirand JqGrid 4.6 demo website.

In this i have a separate ajax call to get data and the ajax calls a ASP MVC action method.

$.ajax({
url:'Controller/Action/ClientId?='+ id,
method:'get',
success:function(data){

var gridData = data;

jQuery("#list483").jqGrid({
    datatype: "local",
    height: 'auto',
    rowNum: 30,
    rowList: [10,20,30],
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
        {name:'name',index:'name', width:100, editable:true},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},      
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    gridComplete:function(){


                        var dataArray = $('#list483').jqGrid('getGridParam', 'data');

//do some processing here

},
    pager: "#plist483",
    viewrecords: true,
    sortname: 'name',
    grouping:true,
    groupingView : {
        groupField : ['name'],
        groupColumnShow : [false],
        groupText : ['<b>{0} - {1} Item(s)</b>']
    },
    caption: "Configure group header row"
});


//load data to grid here
for(var n=0;n<gridData .length;n++){
                    jQuery("#list483").jqGrid('addRowData', n + 1, gridData [n]);
                }





}


})

assume the data that comes from ajax is same as the array in demo website as paste down here:

 [
        {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
        {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
        {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
        {id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
        {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
        {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
        {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
        {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ]

Assume the above data array has 1000 objects. so i need server side paging . But how do i add server side paging to this external ajax call ?

Once add server side paging the following must work:

1. Client side sorting must work
2. RowList must work

thanks

Answer 1

The main problem: you posted some dummy code, which probably has no relation to your real code. It's better to t the code, which more close to your real code and just to replace the data to any dummy data in the same format.

The most problem: you use datatype: "local", but write about the requirement to implement server side paging. It's not consequent. Moreover, you fill the grid using addRowData called in the loop. It's the worst and the slowest way, which I know. If you use datatype: "local" , then you should use data: gridData to fill the data. In the way you create the grid with the data. jqGrid will sort the input data first by groupingView.groupField , then by sortname and to display the first page of the resulting data in the grid.

I'd recommend you additionally to use gridview: true and autoencode: true in all your grids to have better performance and to display the data correctly if you load pure data, which contains no HTML fragments. You recommend to remove unneeded index properties from colModel .

I recommend you to post demos in JSFiddle , which will simplify analyzing of your problems and preparing the fix of there. You can use Echo service of JSFiddle additionally(see here ). I created the demo https://jsfiddle.net/OlegKi/mkgtuuzy/ for you, which uses almost your code and the following options additionally

sortname: 'id',
gridview: true,
autoencode: true,

I would recommend you additionally, don't use retro version 4.6. Instead of that you can use free jqGrid 4.13.4. It's the fork, which I develop since the end of 2014, after renaming the main jqGrid fork to Guriddo jqGrid JS (see the post ), changing the license agreement and making it commercial (see the prices here ). Free jqGrid 4.13.4 is full compatible with the old 4.6, but it contains a lot of fixes, performance improvements and many new features described in README to every published version and the wiki . I recommend you to read the article and the wiki articles this one and this one too, which described some small, but important improvements, which you can use in free jqGrid additionally.

The demo https://jsfiddle.net/OlegKi/mkgtuuzy/1/ uses the same code as the previous page, but includes CSS of Font Awesome 4.7, free jqGrid 4.13.4 and the option iconSet: "fontAwesome" .

About the requirement of server side paging you should good understand that 1000 rows of data is a small dataset for jqGrid if you fill the data correctly. The demo demonstrates the performance of free jqGrid with 5000 rows, 13 columns and 25 rows per page. You can see the performance of local paging, sorting and filtering the data. If you would load compressed (gziped) JSON data loading from the server and add loadonce: true (and forceClientSorting: true in free jqGrid) then you can easy load all the data using datatype: "json" directly from the url . You should have very good total performance.