как разместить пейджер до конца верхней части панели инструментов в бесплатном jqgrid

Question

бесплатная панель инструментов jqgrid содержит множество кнопок, выберите элемент и пейджер без последней кнопки страницы. Кнопки завернуты в несколько строк. Центральная часть удаляется с помощью

#grid_toppager_center { 
    width: 0; 
} 

Поскольку пейджера находится в правой части, есть много неиспользованного пустого пространства ниже и после пейджера:

Я попытался удалить пустое пространство, используя

#grid_toppager_center, #grid_toppager_right { 
    width: 0; 
} 

и

pagerpos: 'left', 

В этом случае пейджера появится в верхней части кнопок на панели инструментов:

Как разместить пейджера в другое место, например, в конце верхней панели?

jqgrid настройки:

$.extend($.jgrid.defaults, { 
    iconSet: "fontAwesome" , 
    autoResizing: { compact: true,widthOfVisiblePartOfSortIcon: 13 }, 
    toppager: true, 
    viewrecords: false, 
    pagerpos: 'left', 
    rowList: [50, 500, 1000], 
    rowNum: 50, 

стиль:

#grid_toppager_center, #grid_toppager_right { 
    width: 0; 
} 

.ui-pg-button-text { 
    margin: 4px !important; 
} 

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span { 
    margin: 0 5px; 
    font-size: 20px; 
} 

.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { 
    margin: 1px; 
    font-weight: normal; 
} 

Update

Я попробовал демо из

http://www.ok-soft-gmbh.com/jqGrid/OK/tougleButton1_iconOver2.htm

и уменьшенная ширина jqgrid.

Пустое пространство все еще появляется:

Как поставить кнопки на эту область, так что они используют всю ширину сетки и обернуть столько строк, сколько nessecary? После кнопок, где должен стоять пейджер.

Желаемая компактна панель занимая в несколько строк в качестве возможных (две последние кнопки удалены в данном примере):

Answer 1

Самый простой способ реализовать ваши требования, кажется мне следующее:

Первый из всех вы удаляете создание ненужных элементов пейджера с использованием pgbuttons: false, pginput: false, rowList: [], viewrecords: false (последние два варианта rowList: [], viewrecords: false уже являются значениями по умолчанию).

Пейджер свободного jqGrid 4.8 по-прежнему состоит из таблицы с одной строкой и тремя ячейками: слева, в центре и справа.Таким образом, чтобы сделать левую часть по всему пейджеру можно использовать следующее:

$("#grid_toppager_center").hide(); 
$("#grid_toppager_right").hide(); 
$("#grid_toppager_left").attr("colspan", "3"); 

Результатов вы можете увидеть на the demo:

В общем можно использовать еще пейджер, и, чтобы скрыть только правую часть пейджера. В этом случае можно использовать

$("#grid_toppager_right").hide(); 
$("#grid_toppager_left").attr("colspan", "2"); 

например. См the next demo, который отображает:

Можно, причиной снижения пейджера путем удаления ненужных элементов, как сделать the demo:

ОБНОВЛЕНО: Решение вашей проблемы зависит от точные требования, которые у вас есть. Я хотел показать вам основную проблему, которая есть в панели пейджера и навигатора. Все остальные настройки могут быть легко сделаны, зависит от того, что вам нужно.

Например, the next demo перемещает стол пейджера внутри навигационная панель. Результаты выглядят как на картинке ниже

Если вам нужны дополнительные настройки, вы должны сделать это самостоятельно. Последняя демон использует код

$("#grid_toppager_left").hide(); 
$("#grid_toppager_right").hide(); 
$("#grid_toppager_center").attr("colspan", "2"); 
$("#grid_toppager_center").css({width: "", "text-align": "left", "white-space": ""}); 
$("#grid_toppager_center").find(">.navtable").append(
    $("#grid_toppager_center").find(">table.ui-pg-table") 
); 
$("#grid_toppager_center").find(">.navtable").children().each(function() { 
    $(this).css("float", "left"); 
}); 
$grid.bind("jqGridAfterGridComplete", function() { 
    var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager); 
    $toppager.find(".navtable").css("width", ""); 
});