Unable to position pager (navigation bar) above jqGrid

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).

Answer 2

use a $ append. the html above table is like this

<div id="export"></div>                        

add the id and use a promise().done(): "exportButton"

$(grid).jqGrid('navButtonAdd', self.options.pagerSelector, { id: "exportButton", caption: "Export to CSV", buttonicon: "ui-icon-newwin", onClickButton: function() { self._exportToCSV(self, grid); }, position: "last", title: "Export to CSV", cursor: "pointer" })
.promise().done(function() {
    //reposition export button
    $("#export").append($("#exportButton"));
    $("#exportButton").addClass("pull-right").show();
});