Navigating

If your grids are all so small that they can display all records at the same time, then you don't need to worry about navigation. But more likely, you will want to display the available records a few at a a time. And for that, you will need the Navigation Bar.

To use this feature we need to enable form editing. For more information refer to Installation.

HTML

The Navigation Bar, also known as the pager, is defined first in html -- normally, but not necessarily, placed so it appears at the bottom of the grid. Note that it is a <div>, not a <table>.

<body> 
<table id="list" class="scroll"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 
</body>

In this example above, the pager controls are centered, but they could be aligned left or right to suit your preferences, as shown in these three examples:

Grid Definition

The pager is then defined in the grid by a grid property:

pager: jQuery('#pager'),

pager: 'pager_id',

Syntax

Calling Convention:

jQuery("#grid_id").navGrid("#pager",{parameters})

Where:

grid_id - the id of the already constructed jqGrid.
pager - the id of the navigation bar
parameters - an array of settings, defined below