Record Paging
Documentation
The DataGrid widget can automatically split its content across multiple pages and allow end users to navigate records using its built-in pager. This demo illustrates how you can change pager settings by using both the paging and pager configuration options.
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.
window.onload = function() {
var viewModel = {
dataGridOptions: {
dataSource: customers,
showBorders: true,
paging: {
pageSize: 10
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [5, 10, 20],
showInfo: true
},
columns: ["CompanyName", "City", "State", "Phone", "Fax"]
}
};
ko.applyBindings(viewModel, document.getElementById("data-grid-demo"));
};
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.1.4/js/dx.all.js"></script>
<script src="data.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="data-grid-demo">
<div id="gridContainer" data-bind="dxDataGrid: dataGridOptions"></div>
</div>
</div>
</body>
</html>
var 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"
}];