paging

Specifies paging options.

Type: Object

In dxDataGrid, records can be loaded either page by page or all at once. Needless to say that the latter approach affects grid performance, especially when the number of loading records is very large. If you, however, want to use it, disable paging by setting the paging | enabled option to false.

When paging is on, you can specify the size of grid pages using the pageSize option. Additionally, if you require displaying grid records starting with a certain page, assign its index to the pageIndex option.

A paginated grid can be navigated by a user at runtime. For this purpose, he or she can use a pager or scrolling.

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, fields of the paging object are used to specify paging settings. The size of a grid page is set to 8 records using the paging | pageSize option. In addition, the index of a start page is specified using the paging | pageIndex option. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, fields of the paging object are used to specify paging settings. The size of a grid page is set to 8 records using the paging | pageSize option. In addition, the index of a start page is specified using the paging | pageIndex option. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, fields of the paging object are used to specify paging settings. The size of a grid page is set to 8 records using the paging | pageSize option. In addition, the index of a start page is specified using the paging | pageIndex option. Data for this example is obtained from www.odata.org.


                                    

                                    

enabled

Specifies whether dxDataGrid loads data page by page or all at once.

Type: Boolean
Default Value: true

When this option is set to true, data from the source is loaded page by page improving the performance of the dxDataGrid widget. The size of the pages is defined by the pageSize option. To navigate through pages, use scrolling or the pager navigation.

If you prefer loading all data from your source at once, disable paging by setting the paging | enabled option to false.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can enable/disable paging in a grid using the check box below. When paging is enabled, the grid is supplied with a pager to help a user navigate through grid records. Otherwise, only scrolling is available. Also, note that in this setting, the grid operates noticeably slower. The data for this example is obtained from www.odata.org.


                                    

                                    

In this example, you can enable/disable paging in a grid using the check box below. When paging is enabled, the grid is supplied with a pager to help a user navigate through grid records. Otherwise, only scrolling is available. Also, note that in this setting, the grid operates noticeably slower. The data for this example is obtained from www.odata.org.


                                    

                                    

In this example, you can enable/disable paging in a grid using the check box below. When paging is enabled, the grid is supplied with a pager to help a user navigate through grid records. Otherwise, only scrolling is available. Also, note that in this setting, the grid operates noticeably slower. The data for this example is obtained from www.odata.org.


                                    

                                    

pageIndex

Specifies the grid page that should be displayed by default.

Type: Number
Default Value: 0

When this option is not specified, a grid displays records starting from the first page. If you need to specify a particular page to start displaying from, assign the index of this page to the pageIndex option.

NOTE
The page index is one less than the page number displayed by the pager. Thus, the first page has 0 index, the second - 1, etc.

In addition, you can set or get the current page index from code using the pageIndex method called with or without the argument.

Show Example:
AngularJS
Knockout
jQuery

In this example, a grid displays data starting from the page number 10 because the paging | pageIndex option is set to 9. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, a grid displays data starting from the page number 10 because the paging | pageIndex option is set to 9. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, a grid displays data starting from the page number 10 because the paging | pageIndex option is set to 9. Data for this example is obtained from www.odata.org.


                                    

                                    

pageSize

Specifies the size of grid pages.

Type: Number
Default Value: 20

When data in a grid is loaded page by page, you can specify how many items a page must contain by setting the pageSize option. Once the page size is set, it can be changed at runtime using the page size selector, which can be made visible by setting the pager | showPageSizeSelector option to true. To specify page sizes that can be selected, use the pager | allowedPageSizes option.

In addition, you can set or get the page size from code using the pageSize method called with or without the argument.

Show Example:
AngularJS
Knockout
jQuery

In this example, the size of a grid page is set to 8 using the paging | pageSize option. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, the size of a grid page is set to 8 using the paging | pageSize option. Data for this example is obtained from www.odata.org.


                                    

                                    

In this example, the size of a grid page is set to 8 using the paging | pageSize option. Data for this example is obtained from www.odata.org.