Grid Paging

jqxGrid component has a built-in paging capability that supports paging functionality. The paging functionality 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.


Grid with Basic Paging

app.component.html
app.component.ts
The Grid Page Size options are displayed in a DropDownList component in the pager area. By default, the size options are 5, 10 and 20. The "pagesizeoptions" property enables you to set new size options.


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

app.component.html
app.component.ts
To navigate to a page with the Grid API, use the 'gotopage' function.


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