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):

Postdiluvian

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

Maccabees

I tried demo in answer but empty space still appears. I updated question. – Postdiluvian

@Andrus: What you tried? Which demo? In Which browsers, with which zoom? Do you have problems in my demo of in your code? ... – Maccabees

@Andrus: See UPDATED part of my answer. – Maccabees

Thank you. I tried it but if text is under buttons, it causes dancing hell. For unknown reason last button wraps to separate line. Video about this is at youtu.be/9_Jn616wOCk – Postdiluvian

I added .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span { margin: 0 5px; font-size: 20px; } to your code and was able to reproduce dancing in chrome in 125% of zoom ( pressing 2 times Ctrl+ + ) in your sample. How to use big icons without dancing in updated sample ? – Postdiluvian

Video which shows dancing in last sample in answer is at youtu.be/9ptWC3_5jXM – Postdiluvian

@Andrus: I wrote you already: "If you need additional customization, you need to do this yourself." I don't want to do all your job. Probably the usage float: left in the last demo is not the best choice one should find better CSS settings. Something like $("#grid_toppager_center").find(">.navtable>table.ui-pg-table").css({display: "inline-block"}); will be better instead of $("#grid_toppager_center").find(">.navtable").children().each(function() {$(this).css("float", "left");}); – Maccabees

Than you very much. $("#grid_toppager_center").find(">.navtable>table.ui-pg-table").css({display: "inline-block"}); worked. Tablets required bigger buttons and have small screens. Can this feature added to jqgrid to make it tablet friendly? – Postdiluvian