how to create Jqgrid using jsp(load data in json format)

jQuery(document).ready(function()
    {

    jQuery("#list10").jqGrid({

        url:'griddata.jsp',
    colNames:['Inv No','Date', 'Client'],
        colModel:[{name:'id',index:'id', width:55},{name:'invdate',index:'invdate', width:90},{name:'name',index:'name', width:100}],
    rowNum:10,
    rowList:[5,7,10],
    pager: '#pager10',
    sortname: 'id',
        datatype: 'json',
        viewrecords: true,
        sortorder: "desc",
    multiselect: false,
    imgpath: "themes/basic/images",
    caption: "Invoice Header",
    onSelectRow: function(ids) {

                        jQuery("#list10_d").jqGrid().setGridParam({url : 'getsubdata.jsp?id='+ids}).trigger("reloadGrid")
                        jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids)

                        }

        });

    jQuery("#list10").jqGrid('navGrid','#pager10',{add:false,edit:false,del:false});

 

 

<!-- subgrid start-->

    jQuery("#list10_d").jqGrid({
                                url:'getsubdata.jsp?id=0',
                                datatype: 'json',
                                colNames:['No','Item', 'Qty', 'Unit','Line Total'],
                                colModel:[
                                        {name:'num',index:'num' },
                                        {name:'item',index:'item'},
                                        {name:'qty',index:'qty',align:"center"},
                                        {name:'unit',index:'unit', align:"center"},     
                                        {name:'linetotal',index:'linetotal',align:"center", sortable:false, search:false}
                                ],
                                rowNum:5,
                                rowList:[5,10,20],
                                pager: '#pager10_d',
                                sortname: 'item',
                                viewrecords: true,
                                sortorder: "asc",
                                multiselect: true,
                                imgpath: "themes/basic/images",
                                caption:"Invoice Detail"
                        }).navGrid('#pager10_d',{add:false,edit:false,del:false});


     }//function
    );//ready