JavaScript/jQuery DataGrid - Paging
Paging is used to load data in portions, which improves the UI component's performance on large datasets. Paging is enabled by default. You can control it with the paging object. Use this object's pageIndex and pageSize properties of to specify the initial page and the number of rows on a page.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- Paging
- } from 'devextreme-react/data-grid';
- class App extends React.Component {
- render() {
- return (
- <DataGrid ... >
- <Paging
- defaultPageSize={15}
- defaultPageIndex={1} /> {/* Shows the second page */}
- </DataGrid>
- );
- }
- }
- export default App;
When working with small datasets, you can disable paging by setting the paging.enabled property to false.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- Paging
- } from 'devextreme-react/data-grid';
- class App extends React.Component {
- render() {
- return (
- <DataGrid ... >
- <Paging enabled={false} />
- </DataGrid>
- );
- }
- }
- export default App;
User Interaction
This section describes how to configure the pager, a component that allows users to navigate through pages and change their size at runtime. The pager consists of the page navigator and several optional elements: the page size selector, navigation buttons, and page information.
Set the showNavigationButtons and the showPageSizeSelector properties to true to show the navigation buttons and the page size selector. The set of available page sizes depends on how large the data source is. You can change it using the allowedPageSizes property.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- Pager
- } from 'devextreme-react/data-grid';
- const allowedPageSizes = [10, 20, 50];
- class App extends React.Component {
- render() {
- return (
- <DataGrid ... >
- <Pager
- showPageSizeSelector={true}
- allowedPageSizes={allowedPageSizes}
- showNavigationButtons={true}
- />
- </DataGrid>
- );
- }
- }
- export default App;
Assign true to the showInfo property to show the page information. You can change the default text by specifiyng the infoText.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- Pager
- } from 'devextreme-react/data-grid';
- class App extends React.Component {
- render() {
- return (
- <DataGrid ... >
- <Pager
- showInfo={true}
- infoText="Page #{0}. Total: {1} ({2} items)"
- />
- </DataGrid>
- );
- }
- }
- export default App;
See Also
API
Call the pageCount() method to get the total page count.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid from 'devextreme-react/data-grid';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.dataGridRef = React.createRef();
- this.getTotalPageCount = () => {
- return this.dataGridRef.current.instance().pageCount();
- }
- }
- render() {
- return (
- <DataGrid ...
- ref={this.dataGridRef}>
- </DataGrid>
- );
- }
- }
- export default App;
The DataGrid also provides the pageIndex(newIndex) and pageSize(value) methods that switch the grid to a specific page and change the page size. They can also be called without arguments, in which case, they return the index and size of the current page.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- Paging
- } from 'devextreme-react/data-grid';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.dataGridRef = React.createRef();
- this.state = {
- pageSize: 20,
- pageIndex: 0
- };
- this.changePageSize = this.changePageSize.bind(this);
- this.goToLastPage = this.goToLastPage.bind(this);
- this.handleOptionChange = this.handleOptionChange.bind(this);
- }
- changePageSize(value) {
- this.setState({
- pageSize: value
- });
- }
- goToLastPage() {
- const pageCount = this.dataGridRef.current.instance().pageCount();
- this.setState({
- pageIndex: pageCount - 1
- });
- }
- handleOptionChange(e) {
- if(e.fullName === 'paging.pageSize') {
- this.setState({
- pageSize: e.value
- });
- }
- if(e.fullName === 'paging.pageIndex') {
- this.setState({
- pageIndex: e.value
- });
- }
- }
- render() {
- return (
- <DataGrid ...
- ref={this.dataGridRef}
- onOptionChanged={this.handleOptionChange}>
- <Paging
- pageSize={this.state.pageSize}
- pageIndex={this.state.pageIndex}
- />
- </DataGrid>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.