JQGrid not changing page

Question

i have a problem in my jqgrid table: i load the json, i have my table but i can only see the last page of the table, without the possibility of changing the page.

the js code:

$("#list").jqGrid(
        {
            url:'test.json',
            datatype: "json",
            mtype: 'GET',
            colNames:['id','model','cc','nation','prod'],
            colModel:[
                      {name:'id', index:'id', jsonmap:"id", width:25},
                      {name:'model', index:'model', jsonmap:"model", width:50},
                      {name:'cc', index:'cc', jsonmap:"cc", width:25},
                      {name:'nation', index:'nation', jsonmap:"nation", width:50},
                      {name:'prod', index:'prod', jsonmap:"prod", width:50}
                     ],
            rowNum: "2",
            page: "1",
            rowList: [2,4,6],
            autowidth: true,
            pager: '#pager',
            height: "100%",
            sortname: 'id',
            caption: "Elenco delle Moto",
            jsonReader: {root: 'rows',page: 'page',total: 'total',records: 'records',repeatitems: false,id: 'id'},

            loadComplete: function() {
                grid.setGridHeight('auto');
            }
        });
        $("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false});
        $("#visual").hide();

and my json file:

{
"total": "3",
"page": "1",
"records": "5",
"rows": 
[
    {
        "Id": "1",
        "model": "shiver",
        "cc": "750",
        "nation": "italy",
        "prod": "aprilia"
    },
    {
        "Id": "2",
        "model": "monster",
        "cc": "696",
        "nation": "italy",
        "prod": "ducati"
    }
],
"page":"2",
"rows":
[
    {
        "Id": "3",
        "model": "z750",
        "cc": "750",
        "nation": "japan",
        "prod": "kawasaki"
    },
    {
        "Id": "4",
        "model": "hornet",
        "cc": "700",
        "nation": "japan",
        "prod": "honda"
    }
],
"page":"3",
"rows":
[
    {
        "Id": "5",
        "model": "speedtriple",
        "cc": "1000",
        "nation": "england",
        "prod": "buell"
    }
]

}

I've tried many times, but always the same result.. Can someone help me?

Answer 1

Your response should contain only one page at once (with the proper page value saying which page is this), so the JSON for first page should look like this:

{
    "total": "3",
    "page": "1",
    "records": "5",
    "rows": [
        { "Id": "1", "model": "shiver", "cc": "750", "nation": "italy", "prod": "aprilia" },
        { "Id": "2", "model": "monster", "cc": "696", "nation": "italy", "prod": "ducati" }
    ]
}

jqGrid will make further request for next pages, you should inspect page and rows parameters of the request. The first will tell you which page you should send back and the second will tell what is the current page size (this is important because you have used rowList option, so the page size can be changed).