Question

I’m trying to create a jqgrid, but the table is empty. The table renders, but the data doesn’t show.

The data I’m getting back from the php call is:

{ 'page':'1', 'total':1, 'records':'10', 'rows':[ {'id':'2:1','cell':['1','image','Chief Scout','Highest Award test','0']}, {'id':'2:2','cell':['2','image','Link Badge','When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)','0']}, {'id':'2:3','cell':['3','image','Pioneer Scout','Upon completion of requirements, the youth is invested as a Pioneer Scout','0']}, {'id':'2:4','cell':['4','image','Voyageur Scout Award','Voyageur Scout Award is the right after Pioneer Scout.','0']}, {'id':'2:5','cell':['5','image','Voyageur Citizenship','Learning about and caring for your community.','0']}, {'id':'2:6','cell':['6','image','Fish and Wildlife','Demonstrate your knowledge and involvement in fish and wildlife management.','0']}, {'id':'2:7','cell':['7','image','Photography','To recognize photography knowledge and skills','0']}, {'id':'2:8','cell':['8','image','Recycling','Demonstrate your knowledge and involvement in Recycling','0']}, {'id':'2:10','cell':['10','image','Voyageur Leadership ','Show leadership ability','0']}, {'id':'2:11','cell':['11','image','World Conservation','World Conservation Badge','0']} ]} 

The javascript configuration looks like so:

$('#'+tableId).jqGrid ({     url:'getAwards.php?id='+classId,     dataType : 'json',     mtype:'POST',     colNames:['Id','Badge','Name','Description',''],     colModel : [         {name:'awardId', width:30, sortable:true, align:'center'},         {name:'badge', width:40, sortable:false, align:'center'},         {name:'name', width:180, sortable:true, align:'left'},         {name:'description', width:380, sortable:true, align:'left'},         {name:'selected', width:0, sortable:false, align:'center'}         ],     sortname: 'awardId',     sortorder: 'asc',     pager: $('#'+tableId+'_pager'),     rowNum:15,     rowList:[15,30,50],     caption: 'Awards',     viewrecords:true,     imgpath: 'scripts/jqGrid/themes/green/images',     jsonReader : {          root: 'rows',          page: 'page',          total: 'total',          records: 'records',          repeatitems: true,          cell: 'cell',          id: 'id',         userdata: 'userdata',          subgrid: {root:'rows', repeatitems: true, cell:'cell' }      },     width: 700,     height: 200 }); 

The HTML looks like:

<table class='awardsList' id='awardsList2' class='scroll' name='awardsList' /> <div id='awardsList2_pager' class='scroll'></div> 

I’m not sure that I needed to define jsonReader, since I’ve tried to keep to the default. If the php code will help, I can post it too.

Answer 1

I got it to work!

The dataType field should be datatype. It’s case sensitive.