pager

Specifies the options of a grid pager.

Type: Object

A pager is a grid element that allows the user to navigate through grid pages and change their size at runtime. By default, the pager is visible if paging is enabled and you do not use virtual or infinite scrolling. To change the pager's visibility explicitly, use its visible option.

The pager consists of a page navigator and a page size selector. The page navigator contains the numbers of pages. Clicking a page number navigates the user to the page. The page size selector contains the page sizes that can be selected. They are specified by the allowedPageSizes option of the pager configuration object. The page size selector is hidden by default. To make it visible, assign true to the pager's showPageSizeSelector option.

View Demo Watch Video

Show Example:
AngularJS
Knockout
jQuery

In this example, the page size selector is made visible using the pager | showPageSizeSelector option. In addition, the set of allowed page sizes is altered by setting the pager | allowedPageSizes option.


                                    

                                    

In this example, the page size selector is made visible using the pager | showPageSizeSelector option. In addition, the set of allowed page sizes is altered by setting the pager | allowedPageSizes option.


                                    

                                    

In this example, the page size selector is made visible using the pager | showPageSizeSelector option. In addition, the set of allowed page sizes is altered by setting the pager | allowedPageSizes option.


                                    

                                    

allowedPageSizes

Specifies the page sizes that can be selected at runtime.

Type: Array|String
Default Value: 'auto'
Accepted Values: 'auto'

When a grid displays data page by page, you can specify the default size of pages using the pageSize option. Additionally, you can enable a user to change the page size at runtime. To do this, make the page size selector visible by setting the pager | showPageSizeSelector option to true. After that, specify the sizes that can be selected in it by assigning an array of these sizes to the pager | allowedPageSizes option. If you do not specify this option, the allowed page sizes will be determined automatically depending on how large the grid data source is.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the set of page sizes that can be selected by a user. To do this, select an item in the select box located below the grid. The value of the selected item will be assigned to the pager | allowedPageSizes option.


                                    

                                    

In this example, you can change the set of page sizes that can be selected by a user. To do this, select an item in the select box located below the grid. The value of the selected item will be assigned to the pager | allowedPageSizes option.


                                    

                                    

In this example, you can change the set of page sizes that can be selected by a user. To do this, select an item in the select box located below the grid. The value of the selected item will be assigned to the pager | allowedPageSizes option.


                                    

                                    

infoText

Specifies the text accompanying the page navigator.

Type: String
Default Value: 'Page {0} of {1}'

When specifying this option, you can access the current page number using position marker 0 and the total page count using position marker 1. Place each of these position markers within curly brackets.

Show Example:
AngularJS
Knockout
jQuery

In this example, the text accompanying the page navigator is changed using the infoText option.


                                    

                                    

In this example, the text accompanying the page navigator is changed using the infoText option.


                                    

                                    

In this example, the text accompanying the page navigator is changed using the infoText option.


                                    

                                    

showInfo

Specifies whether or not to display the text accompanying the page navigator. This text is specified by the infoText option.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery

In this example, you can show/hide page info at runtime by toggling the check box under the grid.


                                    

                                    

In this example, you can show/hide page info at runtime by toggling the check box under the grid.


                                    

                                    

In this example, you can show/hide page info at runtime by toggling the check box under the grid.


                                    

                                    

showNavigationButtons

Specifies whether or not to display buttons that switch the grid to the previous or next page.

Type: Boolean
Default Value: false

Although the page navigator already contains clickable page numbers, you can also supply it with buttons that navigate a user to the previous or next page. To do this, set the showNavigationButtons option to true.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can show/hide the pager navigation buttons at runtime by toggling the check box under the grid.


                                    

                                    

In this example, you can show/hide the pager navigation buttons at runtime by toggling the check box under the grid.


                                    

                                    

In this example, you can show/hide the pager navigation buttons at runtime by toggling the check box under the grid.


                                    

                                    

showPageSizeSelector

Specifies whether to show the page size selector or not.

Type: Boolean
Default Value: false

If you want a user to be able to change the page size at runtime, make the page size selector visible by setting the showPageSizeSelector option to true. Note that the pager should be visible as well, because the page size selector is a part of it. To specify page sizes that can be selected, set the allowedPageSizes option.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the visibility of the page size selector at runtime using the check box under the grid.


                                    

                                    

In this example, you can change the visibility of the page size selector at runtime using the check box under the grid.


                                    

                                    

In this example, you can change the visibility of the page size selector at runtime using the check box under the grid.


                                    

                                    

visible

Specifies whether to show the pager or not.

Type: String|Boolean
Default Value: 'auto'
Accepted Values: 'auto' | true | false

If a grid displays records page by page, the pager is visible by default. Otherwise, it is hidden. However, you can show/hide the pager when you require using the pager | visible option.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the visibility of the pager at runtime using the check box under the grid.


                                    

                                    

In this example, you can change the visibility of the pager at runtime using the check box under the grid.


                                    

                                    

In this example, you can change the visibility of the pager at runtime using the check box under the grid.