Record Paging
The DataGrid splits records into multiple pages. This technique helps optimize control performance: the client only needs to load and render one page at a time. Users can use a scroll bar or a pager to navigate between pages. This demo shows how to enable and customize the pager.
The pager is configured in the pager object and contains the following elements:
-
Page navigator
Enables page navigation. -
Page size selector
Changes the page size. To display this element, enable the showPageSizeSelector property. You can also define the allowedPageSizes and specify the initial pageSize in the paging object. -
Page information
Displays the current page number and total record count. To display page information, enable the showInfo property. You can also use the infoText property to customize the information text string.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<DxDataGrid
:data-source="dataSource"
:show-borders="true"
>
<DxPaging :page-size="10"/>
<DxPager
:show-page-size-selector="true"
:allowed-page-sizes="pageSizes"
:show-info="true"
/>
<DxColumn data-field="CompanyName"/>
<DxColumn data-field="City"/>
<DxColumn data-field="State"/>
<DxColumn data-field="Phone"/>
<DxColumn data-field="Fax"/>
</DxDataGrid>
</template>
<script>
import { DxDataGrid, DxColumn, DxPager, DxPaging } from 'devextreme-vue/data-grid';
import { customers } from './data.js';
export default {
components: {
DxDataGrid,
DxColumn,
DxPager,
DxPaging
},
data() {
return {
dataSource: customers,
pageSizes: [5, 10, 20]
};
}
};
</script>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app">
</div>
</div>
</body>
</html>
export const customers = [{
'ID' : 1,
'CompanyName' : 'Premier Buy',
'Address' : '7601 Penn Avenue South',
'City' : 'Richfield',
'State' : 'Minnesota',
'Zipcode' : 55423,
'Phone' : '(612) 291-1000',
'Fax' : '(612) 291-2001',
'Website' : 'http =//www.nowebsitepremierbuy.com'
}, {
'ID' : 2,
'CompanyName' : 'ElectrixMax',
'Address' : '263 Shuman Blvd',
'City' : 'Naperville',
'State' : 'Illinois',
'Zipcode' : 60563,
'Phone' : '(630) 438-7800',
'Fax' : '(630) 438-7801',
'Website' : 'http =//www.nowebsiteelectrixmax.com'
}, {
'ID' : 3,
'CompanyName' : 'Video Emporium',
'Address' : '1201 Elm Street',
'City' : 'Dallas',
'State' : 'Texas',
'Zipcode' : 75270,
'Phone' : '(214) 854-3000',
'Fax' : '(214) 854-3001',
'Website' : 'http =//www.nowebsitevideoemporium.com'
}, {
'ID' : 4,
'CompanyName' : 'Screen Shop',
'Address' : '1000 Lowes Blvd',
'City' : 'Mooresville',
'State' : 'North Carolina',
'Zipcode' : 28117,
'Phone' : '(800) 445-6937',
'Fax' : '(800) 445-6938',
'Website' : 'http =//www.nowebsitescreenshop.com'
}, {
'ID' : 5,
'CompanyName' : 'Braeburn',
'Address' : '1 Infinite Loop',
'City' : 'Cupertino',
'State' : 'California',
'Zipcode' : 95014,
'Phone' : '(408) 996-1010',
'Fax' : '(408) 996-1012',
'Website' : 'http =//www.nowebsitebraeburn.com'
}, {
'ID' : 6,
'CompanyName' : 'PriceCo',
'Address' : '30 Hunter Lane',
'City' : 'Camp Hill',
'State' : 'Pennsylvania',
'Zipcode' : 17011,
'Phone' : '(717) 761-2633',
'Fax' : '(717) 761-2334',
'Website' : 'http =//www.nowebsitepriceco.com'
}, {
'ID' : 7,
'CompanyName' : 'Ultimate Gadget',
'Address' : '1557 Watson Blvd',
'City' : 'Warner Robbins',
'State' : 'Georgia',
'Zipcode' : 31093,
'Phone' : '(995) 623-6785',
'Fax' : '(995) 623-6786',
'Website' : 'http =//www.nowebsiteultimategadget.com'
}, {
'ID' : 8,
'CompanyName' : 'EZ Stop',
'Address' : '618 Michillinda Ave.',
'City' : 'Arcadia',
'State' : 'California',
'Zipcode' : 91007,
'Phone' : '(626) 265-8632',
'Fax' : '(626) 265-8633',
'Website' : 'http =//www.nowebsiteezstop.com'
}, {
'ID' : 9,
'CompanyName' : 'Clicker',
'Address' : '1100 W. Artesia Blvd.',
'City' : 'Compton',
'State' : 'California',
'Zipcode' : 90220,
'Phone' : '(310) 884-9000',
'Fax' : '(310) 884-9001',
'Website' : 'http =//www.nowebsiteclicker.com'
}, {
'ID' : 10,
'CompanyName' : 'Store of America',
'Address' : '2401 Utah Ave. South',
'City' : 'Seattle',
'State' : 'Washington',
'Zipcode' : 98134,
'Phone' : '(206) 447-1575',
'Fax' : '(206) 447-1576',
'Website' : 'http =//www.nowebsiteamerica.com'
}, {
'ID' : 11,
'CompanyName' : 'Zone Toys',
'Address' : '1945 S Cienega Boulevard',
'City' : 'Los Angeles',
'State' : 'California',
'Zipcode' : 90034,
'Phone' : '(310) 237-5642',
'Fax' : '(310) 237-5643',
'Website' : 'http =//www.nowebsitezonetoys.com'
}, {
'ID' : 12,
'CompanyName' : 'ACME',
'Address' : '2525 E El Segundo Blvd',
'City' : 'El Segundo',
'State' : 'California',
'Zipcode' : 90245,
'Phone' : '(310) 536-0611',
'Fax' : '(310) 536-0612',
'Website' : 'http =//www.nowebsiteacme.com'
}, {
'ID' : 13,
'CompanyName' : 'Super Mart of the West',
'Address' : '702 SW 8th Street',
'City' : 'Bentonville',
'State' : 'Arkansas',
'Zipcode' : 72716,
'Phone' : '(800) 555-2797',
'Fax' : '(800) 555-2171',
'Website' : 'http://www.nowebsitesupermart.com'
}, {
'ID' : 14,
'CompanyName' : 'Electronics Depot',
'Address' : '2455 Paces Ferry Road NW',
'City' : 'Atlanta',
'State' : 'Georgia',
'Zipcode' : 30339,
'Phone' : '(800) 595-3232',
'Fax' : '(800) 595-3231',
'Website' : 'http =//www.nowebsitedepot.com'
}, {
'ID' : 15,
'CompanyName' : 'K&S Music',
'Address' : '1000 Nicllet Mall',
'City' : 'Minneapolis',
'State' : 'Minnesota',
'Zipcode' : 55403,
'Phone' : '(612) 304-6073',
'Fax' : '(612) 304-6074',
'Website' : 'http =//www.nowebsitemusic.com'
}, {
'ID' : 16,
'CompanyName' : "Tom's Club",
'Address' : '999 Lake Drive',
'City' : 'Issaquah',
'State' : 'Washington',
'Zipcode' : 98027,
'Phone' : '(800) 955-2292',
'Fax' : '(800) 955-2293',
'Website' : 'http =//www.nowebsitetomsclub.com'
}, {
'ID' : 17,
'CompanyName' : 'E-Mart',
'Address' : '3333 Beverly Rd',
'City' : 'Hoffman Estates',
'State' : 'Illinois',
'Zipcode' : 60179,
'Phone' : '(847) 286-2500',
'Fax' : '(847) 286-2501',
'Website' : 'http =//www.nowebsiteemart.com'
}, {
'ID' : 18,
'CompanyName' : 'Walters',
'Address' : '200 Wilmot Rd',
'City' : 'Deerfield',
'State' : 'Illinois',
'Zipcode' : 60015,
'Phone' : '(847) 940-2500',
'Fax' : '(847) 940-2501',
'Website' : 'http =//www.nowebsitewalters.com'
}, {
'ID' : 19,
'CompanyName' : 'StereoShack',
'Address' : '400 Commerce S',
'City' : 'Fort Worth',
'State' : 'Texas',
'Zipcode' : 76102,
'Phone' : '(817) 820-0741',
'Fax' : '(817) 820-0742',
'Website' : 'http =//www.nowebsiteshack.com'
}, {
'ID' : 20,
'CompanyName' : 'Circuit Town',
'Address' : '2200 Kensington Court',
'City' : 'Oak Brook',
'State' : 'Illinois',
'Zipcode' : 60523,
'Phone' : '(800) 955-2929',
'Fax' : '(800) 955-9392',
'Website' : 'http =//www.nowebsitecircuittown.com'
}];
System.config({
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader'
},
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.6',
'devextreme-vue': 'npm:devextreme-vue@20.2.6',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.18/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.24/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.13/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js'
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});