jqGrid not showing rows, only shows total number of rows

I'm having a problem that I can't sort it out.

Please take a look at this image first

As you can see, I have been able to request the JSON data from server. The pager shows that there were 4 records. But the records didn't shows in the table.

This is my javascript code

jQuery("#pickFlex66").jqGrid({
    url: root + '<?=$mod?>' + '/listpicker',
    datatype: "json",
    altRows: true,
    mtype: 'POST',
    colNames:['Code','Company Name'],
    colModel:[
        {name:'company_co开发者_运维知识库de',index:'company_code', width:100},
        {name:'company_name',index:'company_name', width:100}
        ],
    rowNum:10,
    width: 540,
    height: 310,
    rowList:[10,20,30],
    pager: '#pagerFlex66',
    sortname: 'company_code',
    shrinkToFit: false,
    viewrecords: true,
    sortorder: "desc",
    caption:"<?=lang("users_title")?>",
    onSelectRow: function(id){

    }
});

jQuery("#pickFlex66").jqGrid('navGrid','#pagerFlex66',{edit:false,add:false,del:false,search:false});

And here is my JSON data

{
"page": "1",
"total": 0,
"records": "4",
"rows": [{"id":"5","cell":["55-123","123"]},{"id":"3","cell":["123","IBM"]},{"id":"2","cell":["00000","BDO"]},{"id":"1","cell":["000-00","IT GROUP Inc "]}]
}

Is there a mistake in my javascript? Or maybe in my JSON data?

---

I agree with Briguy37 that the value "total": 0 is strange and of cause incorrect. Nevertheless jqGrid should do display all data.

I suppose that you have the problem in the part of your code which you not posted here. How you can see from the demo the code which you posted can do read and display the JSON data.

---

Here's a couple issues...haven't figured out why your results aren't getting populated yet, though:

Total in your returned JSON should be the number of pages. Because it is set to 0, that is why it is displaying 0. Also, you'll probably want to return rowCount as 10 in case you change the number of results per page.

---

You are missing a json reader, I had the exact same problem.

$("#list").jqGrid({
url : "my-json-table-action' />",
datatype: 'json',
jsonReader: {
root: 'gridModel',
id: 'idTT',
repeatitems: false,
},
resize: false,
hidegrid: false,
data: 'trabajosTerminales',
mtype: 'POST',
height: 'auto',
colNames:['No. de Registro', 'Título', 'Tipo', 'Periodo'],
colModel :[ 
{name:'numRegistro', index:'titulo', search: 'true', stype:'text', align:'center' searchrules:{required:true},  width:100  },
{name:'titulo', key:'true', index:'titulo', search: 'true', stype:'text',        searchrules:{required:true},  width:800  },
{name:'tipo', key:'true', index:'tipo', search: 'true', stype:'text',align:'center', searchrules:{required:true},  width:100  },
{name:'periodo', key:'true', index:'titulo', search: 'true', stype:'text', searchrules:{required:true},  width:100  },
],
pager: '#pager', 
rowNum:10,
rowList:[10,20,30],
viewrecords: true,
gridview: true,
caption: 'Trabajos Terminales dirigidos',
}); 

jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false});     
}); 

Where the root element is the array that contains your data, in this case I'm returning my data in an array called 'gridModel', the id is not necessary. But you have to make sure to set the root element right, in your case it's called 'rows' instead 'gridModel'.