jquery - how to place pager to end of top of toolbar in free jqgrid

Question

free jqgrid top toolbar contains lot of buttons, select element and pager without last page button. Buttons are wrapped to multiple lines. Central part is removed using

#grid_toppager_center {
    width: 0;
}

Since pager is in right area, there is lot of unused empty space below and after pager:

I tried to remove empty space using

#grid_toppager_center, #grid_toppager_right {
    width: 0;
}

and

    pagerpos: 'left',

In this case pager appears in top of toolbar buttons:

How to place pager to other place, for example to end of top toolbar ?

jqgrid settings:

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

style:

#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

I tried demo from

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

and decreased jqgrid width.

Empty space still appears:

How to put buttons to this area so that they use whole grid width and wrap as many lines as nessecary ? After buttons where should be pager.

Desired is compact toolbar occupying as few rows as possible (two last buttons removed in this sample):

Answer 1

The simplest way to implement your requirements seems me the following:

First of all you remove creating unneeded elements of the pager by usage pgbuttons: false, pginput: false, rowList: [], viewrecords: false (the last two options rowList: [], viewrecords: false are already defaults).

The pager of free jqGrid 4.8 still consists from the table with one row and three cells: left, center and right. So to make the left part over the whole pager one can use the following:

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

The results you can see on the demo:

In general one can use still the pager, and to hide only the right part of the pager. In the case one can use

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

for example. See the next demo which displays:

One can of cause reduce the pager by removing unneeded elements like do the demo:

UPDATED: The solution of your problem depends on exact requirements which you have. I wanted to show you the main problem which one have in the pager and navigator bar. All other adjustments can be easy made depend on what you need.

For example the next demo moves the pager table inside of navigator bar. The results looks like on the picture below

If you need additional customization, you need to do this yourself. The last demo uses the code

$("#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", "");
});