Here, I’m going to explain changing position of navigation bar including pager of JqGrid. I have provided the default JqGrid configuration below,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!-- HTML --> <div> <div style="float: left; width: 100%;margin: 10px;"> <table id="tblPlanList"></table> <div id="divPagerPlanList"></div> </div> </div> <script type="text/javascript"> jQuery().ready(function (){ jQuery("#tblPlanList").jqGrid({ url:'getplans', datatype: "json", height: 150, width: 863, rowNum: 10, rowTotal: 2000, rowList: [10,20,30], colNames:['Id','SlNo','Plan', 'Type', 'Status','Edit','Delete'], colModel:[ {name:'id',index:'id', width:100, sorttype:"int",align:"center",hidden:true}, {name:'slno',index:'slno', width:80, sorttype:"int",align:"center",search:false}, {name:'planname',index:'planname', width:329, sorttype:"text"}, {name:'plantype',index:'plantype', width:229}, {name:'planstatus',index:'planstatus', width:155, align:"center",sorttype:"text"}, {name:'edit',index:'edit', width:100, align:"center",sortable:false,search:false}, {name:'delete',index:'delete', width:100, align:"center",sortable:false,search:false}], pager: "#divPagerPlanList", viewrecords: true, loadonce:true, nocase:true, caption: "Plans" }); jQuery("#tblPlanList").jqGrid('navGrid','#divPagerPlanList',{del:false,add:false,edit:false,search:false}); jQuery("#tblPlanList").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false}); }); </script> |
As per the above default configuration, JqGrid will look like as below,
If you want to change the position of the navigation bar to above, add toppager:true attribute to the above configuration. And in this case you don’t need to define the <div id=”divPagerPlanList”></div> and use pager: “#divPagerPlanList”. In this case the the id of the pager will be list_toppager. Refer the changed configuration & image below,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | jQuery().ready(function (){ jQuery("#tblPlanList").jqGrid({ url:'getplans', datatype: "json", height: 150, width: 863, rowNum: 10, rowTotal: 2000, rowList: [10,20,30], colNames:['Id','SlNo','Plan', 'Type', 'Status','Edit','Delete'], colModel:[ {name:'id',index:'id', width:100, sorttype:"int",align:"center",hidden:true}, {name:'slno',index:'slno', width:80, sorttype:"int",align:"center",search:false}, {name:'planname',index:'planname', width:329, sorttype:"text"}, {name:'plantype',index:'plantype', width:229}, {name:'planstatus',index:'planstatus', width:155, align:"center",sorttype:"text"}, {name:'edit',index:'edit', width:100, align:"center",sortable:false,search:false}, {name:'delete',index:'delete', width:100, align:"center",sortable:false,search:false}], viewrecords: true, loadonce:true, nocase:true, caption: "Plans", toppager: true }); jQuery("#tblPlanList").jqGrid('navGrid','#list_toppager',{del:false,add:false,edit:false,search:false}); jQuery("#tblPlanList").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false}); }); |
Then, if we want to get the navigation bar on both top and bottom, do the first step as specified above. After that add cloneToTop:true option as follows,
jQuery(“#tblPlanList”).jqGrid(‘navGrid’,’#divPagerPlanList’,{cloneToTop: true, del:false,add:false,edit:false,search:false});
OR
jQuery(“#tblPlanList”).jqGrid(‘navGrid’,’#pager’,{cloneToTop: true, del:false,add:false,edit:false,search:false});
Refer the changed configuration and image below,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | jQuery().ready(function (){ jQuery("#tblPlanList").jqGrid({ url:'getplans', datatype: "json", height: 150, width: 863, rowNum: 10, rowTotal: 2000, rowList: [10,20,30], colNames:['Id','SlNo','Plan', 'Type', 'Status','Edit','Delete'], colModel:[ {name:'id',index:'id', width:100, sorttype:"int",align:"center",hidden:true}, {name:'slno',index:'slno', width:80, sorttype:"int",align:"center",search:false}, {name:'planname',index:'planname', width:329, sorttype:"text"}, {name:'plantype',index:'plantype', width:229}, {name:'planstatus',index:'planstatus', width:155, align:"center",sorttype:"text"}, {name:'edit',index:'edit', width:100, align:"center",sortable:false,search:false}, {name:'delete',index:'delete', width:100, align:"center",sortable:false,search:false}], pager: "#divPagerPlanList", viewrecords: true, loadonce:true, nocase:true, caption: "Plans", toppager: true }); jQuery("#tblPlanList").jqGrid('navGrid','#divPagerPlanList',{cloneToTop: true, del:false,add:false,edit:false,search:false}); jQuery("#tblPlanList").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false}); }); |