Question

I just start using jqgrid, but when I try the most simple example (loading JSON data), it is not working (no row added on tbody)

I have load these file in head section

<link rel="stylesheet" type="text/css" href="http://192.168.3.9/wavinet2-permana/application/themes/default/css/jqueryui/jquery-ui-1.8.8.custom.css">

<script src="http://192.168.3.9/wavinet2-permana/application/themes/default/js/jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="http://192.168.3.9/wavinet2-permana/application/themes/default/js/jquery-ui-1.8.8.custom.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="/wavinet2-permana/application/assets/css/jqgrid/ui.jqgrid.css">

<script src="/wavinet2-permana/application/assets/js/jqgrid/i18n/grid.locale-id.js" type="text/javascript"></script>

<script src="/wavinet2-permana/application/assets/js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>

And I have the javascript to load and config jqgrid

<script type="text/javascript">
$('#list2').jqGrid({
url: SITE_URL+'/account/test/jqgrid_ajax',
dataType: 'json',
mtype: 'GET',
colNames: ['Username', 'Nama Person'],
colModel: [
{name:'username', index: 'username', width:200, key:true},
{name:'nama_person', index: 'nama_person', width:200}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'username',
sortorder: 'ASC',
caption: 'Account Example',
viewrecords: true,
jsonReader: {repeatitems: false}
});
$('#list2').jqGrid('navGrid','#pager2',{edit:false,add:false,del:false}); 
</script>

body

<table id="list2" width="100%"></table>
<div id="pager2"></div>

JSON response

{
   "page":"1",
   "total":"2",
   "records":"13",
   "rows":[
      {
         "id":"Oke1",
         "cell":[
            "Oke1",
            "Deh"
         ]
      },
      {
         "id":"Oke2",
         "cell":[
            "Oke2",
            "Deh"
         ]
      },
      {
         "id":"Oke3",
         "cell":[
            "Oke3",
            "Deh"
         ]
      },
      {
         "id":"Oke4",
         "cell":[
            "Oke4",
            "Deh"
         ]
      },
      {
         "id":"Oke5",
         "cell":[
            "Oke5",
            "Deh"
         ]
      },
      {
         "id":"Oke6",
         "cell":[
            "Oke6",
            "Deh"
         ]
      },
      {
         "id":"Oke7",
         "cell":[
            "Oke7",
            "Deh"
         ]
      },
      {
         "id":"Oke8",
         "cell":[
            "Oke8",
            "Deh"
         ]
      },
      {
         "id":"Oke9",
         "cell":[
            "Oke9",
            "Deh"
         ]
      },
      {
         "id":"Oke10",
         "cell":[
            "Oke10",
            "Deh"
         ]
      }
   ]
}

I try to open in Firefox Windows, Firefox Ubuntu, and Internet Explorer 8, it returns the same result. The grid is rendered but there are no data on tbody

Answer 1

I see two small errors in your code:

• you should use datatype: 'json' instead of dataType: 'json' which you probably know from jQuery.ajax.
• you should remove jsonReader: {repeatitems: false} parameter.

See the demo.

I recommend you additionally to use jQuery 1.6.2 instead of jQuery 1.4.4 which is now already “retro” version. With the version 1.6.3 you should be a little more sensible (see here). In the same way jQuery UI 1.8.8 is also an old version. I recommend you to use jQuery UI 1.8.16.