<table id="products"> </table>
<div id="producttb"></div>

        <script type="text/javascript">

        jQuery("#products").jqGrid({
            url:'/admin/shopproduct/list/',
            datatype: "json",
            colNames:['productid','productname','category', 'price_tax', 'ean', 'partno', 'brand', 'stock'],
            colModel:[
                        {name:'productid',index:'productid', width:60, sorttype:'int'},
                        {name:'productname',index:'productname', width:60},
                        {name:'categorytitle',index:'categorytitle', width:60},
                        {name:'price_tax',index:'price_tax', width:60},
                        {name:'sku',index:'sku', width:60},
                        {name:'partno',index:'partno', width:60},  
                        {name:'brand',index:'brand', width:60},
                        {name:'stock',index:'stock', width:60}  
            ],
            rowNum:10,
            mtype: "GET",
            gridview: true,
            rowList:[10,20,30],
            pager: jQuery('#producttb'),
            sortname: 'productid',
            viewrecords: true,
            sortorder: 'asc',
            caption:'Products',
            width:625,
            height: 'auto'
        }).navGrid('#producttb',{
            edit:true,
             add:true,
            del:true
            });
        </script>