title: How do i add server side paging for jqGrid if data comes from a separate ajax call?[Trirand JQgrid 4.6]
body: <p>I need to generate a <strong>jqGrid</strong> structure that similar to <strong>Grouped Header Row Config</strong> example in trirand JqGrid 4.6 demo website. </p>
  
  <p><a href="https://i.stack.imgur.com/gnsTV.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/gnsTV.jpg" alt="enter image description here"></a></p>
  
  <p>In this i have a separate ajax call to get data and the ajax calls a ASP MVC action method. </p>
  
  <pre><code>$.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 : ['&lt;b&gt;{0} - {1} Item(s)&lt;/b&gt;']
      },
      caption: "Configure group header row"
  });
  
  
  //load data to grid here
  for(var n=0;n&lt;gridData .length;n++){
                      jQuery("#list483").jqGrid('addRowData', n + 1, gridData [n]);
                  }
  
  
  
  
  
  }
  
  
  })
  </code></pre>
  
  <p>assume the data that comes from ajax is same as the array in demo website as paste down here:</p>
  
  <pre><code> [
          {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"}
      ]
  </code></pre>
  
  <p>Assume the above data array has 1000 objects. so i need <strong>server side paging</strong>. But how do i add <strong>server side paging to this external <code>ajax</code> call</strong>?</p>
  
  <p>Once add server side paging the following must work:</p>
  
  <ol>
  <li>Client side sorting must work</li>
  <li>RowList must work</li>
  </ol>
  
  <p>thanks</p>