jqgrid Custom Numeric Pagination

How to change jqgrid pagination like: Pages 1 of 15 (150 Items) << < 1 2 3 4 5.. 12 13 15 > >>

Both display in center td.

Look at the answer which provides the corresponding demos. In general you can create the pager in any other custom way. You cab . It's important just to place links with 1 2 3 4 5 ... 12 13 15 and bind click event handler for the links. Inside of the event handler you need just trigger reloadGrid event on the grid with the corresponding page parameter: $("#gridid").trigger("reloadGrid", [{page: newPage}]);. See the answer additionally.

UPDATED: The answer is 3.5 years old. The demos use jqGrid 3.8.2 version. Starting with version 4.3.2 (the current is 4.6) jqGrid supports jQuery events. It allows easy to register more as one event handler. Disadvantage of classical callbacks like loadComplete or onSelectRow: "there can be only one". You can't define one common callback loadComplete with initialization of pager for example and to use another additional callback loadComplete with specific additional actions. You can define common loadComplete by

$.extend(true, $.jgrid.defaults, {
    loadComplete: function (data) {
        ...
    }
});

but it will be overwritten if one define loadComplete in the grid. On the other side one can register multiple jqGridLoadComplete or jqGridAfterLoadComplete event handlers and all from there will be called. jQuery appends the list of event handlers instead of overwriting it.

So to implement new feature, like new pager, in a complex project which contains many many grids I can suggest you two snippets.

The first one required small modification of the code. Look at the demo. Grid options don't contains any loadComplete callback, but includes the line

$grid.on("jqGridAfterLoadComplete", refreshPager);

before creating the grid $grid. The code of refreshPager is the modified copy of loadComplete callback from the old demo. In the way multiple "jqGridAfterLoadComplete" event handler can be registered.

You can modify the code by including the line

myjqGridInit($grid);

before every grid creating and place the code of myjqGridInit function in separate .js file which you includes after jquery.jqGrid.min.js. In the way you can place all common project initialization of jqGrid (like registering of $grid.on("jqGridAfterLoadComplete", refreshPager);) in one place of your project. It will be easy to maintain such project.

If you don't use onInitGrid callback till now I can suggest you the second alternative which allows you minimal changes of the existing pages with jqGrid. If you use master pages in your project you could need just include the following code after jquery.jqGrid.min.js and before any grid is created:

$.extend(true, $.jgrid.defaults, {
    onInitGrid: function () {
        refreshPager.call(this);
    }
});

The above code defines default onInitGrid callback which makes all project initialization. The code of refreshPager you can of case place in separate .js file too and just include it on the master page.

The demo demonstrates the snippet. In the way you could implement new feature in all jqGrids of your existing projects with minimal modification of the code. The only restriction: you should don't use onInitGrid callback in your grids, because it will overwrite the common initialization.