(requires jqxgrid.pager.js)

The Grid plugin has a built-in paging capability that supports paging functionality. The paging functionality is implemented in the jqxgrid.pager.js and is enabled when the 'pageable' property is set to true. The code example below illustrates how to enable the paging functionality.
When a page is changed or the page size is changed, the Grid raises the pagechanged or pagesizechanged events.

Basic Grid with Paging

The result of the above code is:

The Grid Page Size options are displayed in a DropDownList plugin in the pager area. By default, the size options are 5, 10 and 20. The 'pagesizeoptions' property enables you to set new size options.
$('#grid').jqxGrid({ pagesizeoptions: ['10', '20', '30']}); 

The 'pagesize' property sets the default page size when the paging functionality is enabled. By default the Grid displays 10 rows in a page.

The 'pagerrenderer' property allows you to customize the UI of the Grid pager. In the sample below, we create a pagerrenderer function and inside the function, we build a DIV element with anchor tags. Each anchor tag has a page number as text. When the user clicks an anchor tag, the Grid calls the 'gotopage' function to navigate to a page. The 'pagerrenderer' function returns the DIV element as a result. This element is then internally appended to the Grid's pager area.

Grid with custom Paging

The result of the above code is:

To navigate to a page with the Grid API, use the 'gotopage' function.
$("#jqxgrid").jqxGrid('gotopage', 1);

The 'gotoprevpage' function navigates with 1 page before the current page.
The 'gotonextpage' function navigates with 1 page after the current page.

For Server-Side paging, see the Server-side processing with PHP and MySQL help topic.