Your search did not match any results.
Data Grid

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.
Copy to Codepen
Apply
Reset
$(function(){ $("#gridContainer").dxDataGrid({ dataSource: customers, paging: { pageSize: 10 }, pager: { showPageSizeSelector: true, allowedPageSizes: [5, 10, 20], showInfo: true }, columns: ["CompanyName", "City", "State", "Phone", "Fax"] }); });
<!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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.6/js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>
#gridContainer { height: auto; width: 100%; }
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" }];