Jqgrid & progressive enhancement: Successfully progresses from HTML, to local JSON, to remote JSON, but pager doesn't start correctly?

Question

Take a look at what happens in my fiddle here: http://jsfiddle.net/tbH5H/

I\'m trying to achieve proper progressive enhancement using jgrid. Everything works great,

Answer 1

Your data should be in the following format:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [{"id":1,"state":"Alabama"},
       {"id":2,"state":"Alaska"},
       {"id":3,"state":"Arizona"},
       {"id":4,"state":"Arkansas"},
       {"id":5,"state":"California"},
       {"id":6,"state":"Colorado"},
       {"id":7,"state":"Connecticut"},
       {"id":8,"state":"Delaware"},
       {"id":9,"state":"Florida"},
       {"id":10,"state":"Georgia"}]
}

Where:

total   =  total pages for the query
page    = current page of the query
records = total number of records for the query
rows    = an array that contains the actual data

You need to have the json reader configured for the above some thing like given below:

 jsonReader : {
     root: "rows",
     page: "page",
     total: "total",
     records: "records",
     repeatitems: false,
     cell: "cell",
     ...
   },
...

More information can be found here with examples - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

Update

You can't have the feature when the datatype is local. When the data type is local the page/record etc are ignored by Jqgird. You should probably try virtual scrolling -> Go to Jqgrid Demo -> New in 3.7 -> Virtual Scrolling.

Or probably you should do a server call and return with the data you intend to use as local with the page/records etc?

Answer 2

Got it!

I needed to use localReader. See new fiddle: http://jsfiddle.net/2UCk6/

localReader: {
    // These values would be inserted on first page load from server-side script
    page: function(obj) { return 1; },
    total: function(obj) { return 5; }, 
    records: function(obj) { return 50; }
},