Question

According the the jqGrid documentation, I should be able to place the pager above or below the jqGrid by moving the pager div. Unfortunately, the pager always renders below the grid.

<div id="pager"></div>
<table id="list">
    <tr>
        <td />
    </tr>
</table>

The jqGrid configuration (related to the pager) looks like:

pager: '#pager',
pginput: false,
pgbuttons: false,

Any suggestions?

Answer 1

You should use toppager:true jqGrid option instead. You don’t need define <div id="pager"></div> and use pager: '#pager' parameter. The id of the pager from the top of jqGrid will be “list_toppager” (id of the table element appended with “_toppager”).

If you want to add navigator you can use

$("#list").jqGrid('navGrid','#list_toppager');

If you use define <div id="pager"></div> and use pager: '#pager' parameter you will have two pager: one with id="list_toppager" on top of the grid and anothe with id="pager" on the bottom. If you want use both top and bottom pager you can use

$("#list").jqGrid('navGrid','#pager',{cloneToTop:true});

and then move or remove (see another answer for more details and the demo example). You can also very easy move buttons from one toolbar to the other using jQuery.insertAfter function (see here).