Nicht in der Lage zur Position Pager (Navigationsleiste) oberhalb jqGrid

Question

die die jqGrid Dokumentation nach, sollte ich in der Lage sein, den Pager zu platzieren oberhalb oder unterhalb des jqGrid durch den Pager div bewegen. Leider macht der Pager immer unter dem Gitter.

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

Die jqGrid Konfiguration (bezogen auf den Pager) sieht aus wie:

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

Irgendwelche Vorschläge?

Answer 1

Sie sollten stattdessen toppager:true jqGrid Option verwenden. Sie brauchen nicht <div id="pager"></div> und Verwendung pager: '#pager' Parameter definieren. Die ID des Pagers von der Spitze der jqGrid wird „list_toppager“ (id des Tabellenelements angehängt mit „_toppager“).

Wenn Sie hinzufügen möchten Navigator Sie verwenden können,

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

Wenn Sie <div id="pager"></div> und Verwendung pager: '#pager' verwenden definieren Parameter Sie zwei Pager haben: eines mit id="list_toppager" oben auf dem Gitter und anothe mit id="pager" auf der Unterseite. Wenn Sie beide oben verwenden möchten, und unten Pager können Sie

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

und dann verschieben oder zu entfernen (siehe jQuery.insertAfter -Funktion (siehe < a href = "https://stackoverflow.com/questions/2678904/adding-button-to-jqgrid-top-toolbar/2679672#2679672"> hier ).

Answer 2

einen $ append verwenden. die html obigen Tabelle ist wie dieser

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

die ID hinzuzufügen und ein Versprechen verwenden () durchgeführt ():. "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();
});