Positioning pager of JqGrid

Here, I’m going to explain changing position of navigation bar including pager of JqGrid. I have provided the default JqGrid configuration below,

As per the above default configuration, JqGrid will look like as below,

oie_1318151523xwGWA

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,

oie_13181733Q2a3z3q9

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,

oie_13182447TK42munA

Read More