Question

I’m trying to load data from the jsp response which is a JSON using JQGrid.

my index.html

<pre>
<script type="text/javascript" src="jqgrid/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="jqgrid/src/grid.loader.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
</pre>

function getEmployeeDetails(){
   jQuery("#list").jqGrid({
     datatype: function(postdata) {
            jQuery.ajax({
                 url: 'execute.jsp?command=command',
                 mtype:'POST',
                 datatype:"json",
                     colModel : [
                     {name:'amount', width:30, sortable:true, align:'center'},
                     {name:'age', width:40, sortable:false, align:'center'},
                     {name:'name', width:180, sortable:true, align:'left'},
                     {name:'total', width:380, sortable:true, align:'left'}
                     ],

                   jsonReader : {
                         root: "key",
                         page: "currentpage",
                         total: "total",
                         records: "totalrecords",
                         repeatitems: true,
                         cell: "cell",
                         id: "id",
                         userdata: "userdata" 
                         }, 
                         width: 700,
                         height: 200,

                   pager: '#pager',
                   sortorder: 'desc',
                   viewrecords: true,
                   caption: 'My first grid'
            });
           }
   });
}    

And my execute.jsp code

**<pre>
response.setContentType("application/json");
response.getWriter().write(wr.toJSONString());
</pre>**

my JSON string generated from java object.

{
    "totalrecords":"20",
    "tota1":"10",
    "currentpage":"runCommand.jsp",
    "key":[
    {"id":"1","cell":["12000","30","Myname","10000"]}
    ]
}

Data is not loading into the table. I am trying in different ways I can’t succeed. Always table is coming empty and says loading…..Please help me. What is wrong here…

Answer 1

You use datatype in the wrong way. You don’t need call jQuery.ajax manually jqGrid will make this for you. The JavaScript code could be about the following:

$(document).ready(function() {
    $("#list").jqGrid({
        url: 'execute.jsp?command=command',
        mtype:'POST',
        datatype:"json",
        colModel : [
             {name:'amount', width:30, align:'center'},
             {name:'age', width:40, sortable:false, align:'center'},
             {name:'name', width:180},
             {name:'total', width:380}
        ],
        jsonReader : {
            root: "key",
            page: "currentpage",
            total: "total",
            records: "totalrecords"
        },
        width: 700,
        height: 200, // the value 'auto' could be probably better
        pager: '#pager',
        sortorder: 'desc',
        viewrecords: true,
        caption: 'My first grid'
    });
});

See the demo here. You should correct the value "currentpage":"runCommand.jsp" from your JSON data to some numeric value like "currentpage":"1" for example.