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,


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,


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});


jQuery(“#tblPlanList”).jqGrid(‘navGrid’,’#pager’,{cloneToTop: true, del:false,add:false,edit:false,search:false});

Refer the changed configuration and image below,


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">