Не удалось разместить пейджер (панель навигации) над jqGrid

Согласно документации jqGrid, я могу разместить пейджер выше или ниже jqGrid, переместив пейджер div. К сожалению, пейджер всегда отображается ниже сетки.

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

Конфигурация jqGrid (связанная с пейджером) выглядит так:

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

Любые предложения?

Ответ 1

Вместо этого следует использовать опцию toppager:true jqGrid. Вам не нужно определять <div id="pager"></div> и использовать параметр pager: '#pager'. Идентификатор пейджера с вершины jqGrid будет "list_toppager" (идентификатор элемента таблицы, добавленного в "_toppager" ).

Если вы хотите добавить навигатор, вы можете использовать

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

Если вы используете define <div id="pager"></div> и используете параметр pager: '#pager', у вас будет два пейджер: один с id="list_toppager" поверх сетки и anothe с id="pager" внизу. Если вы хотите использовать верхний и нижний пейджер, вы можете использовать

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

а затем переместите или удалите (см. еще один ответ для получения более подробной информации и демонстрационного примера). Вы также можете легко перемещать кнопки с одной панели инструментов на другую, используя jQuery.insertAfter (см. здесь).

Ответ 2

используйте $append. html над таблицей похож на этот

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

добавьте идентификатор и используйте prom(). 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();
});