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

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