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

Question

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

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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

использовать $ append. HTML-таблицу выше, как это

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

добавить идентификатор и использовать обещание() Молодцы():. "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(); 
});