DevExtreme v25.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Data Grid - Paging

The DevExtreme JavaScript DataGrid ships with comprehensive data paging support and can load rows in chunks to improve performance when displaying large data sets. This demo allows you to navigate between pages using the JavaScript DataGrid’s integrated pager.

You can use the controls below the JavaScript DataGrid to change pager display mode and toggle visibility of individual pager elements. Note: navigation buttons are always visible in compact mode.

Also available for:
ASP.NET Core ASP.NET MVC 5
Backend API
$(() => { const dataGrid = $('#gridContainer').dxDataGrid({ dataSource: generateData(100000), keyExpr: 'id', showBorders: true, customizeColumns(columns) { columns[0].width = 70; }, scrolling: { rowRenderingMode: 'virtual', }, paging: { pageSize: 10, }, pager: { visible: true, allowedPageSizes: [5, 10, 'all'], showPageSizeSelector: true, showInfo: true, showNavigationButtons: true, }, }).dxDataGrid('instance'); $('#displayMode').dxSelectBox({ items: [{ text: "Display Mode 'full'", value: 'full' }, { text: "Display Mode 'compact'", value: 'compact' }], displayExpr: 'text', inputAttr: { 'aria-label': 'Display Mode' }, valueExpr: 'value', value: 'full', onValueChanged(data) { dataGrid.option('pager.displayMode', data.value); navButtons.option('disabled', data.value === 'compact'); }, }); $('#showPageSizes').dxCheckBox({ text: 'Show Page Size Selector', value: true, onValueChanged(data) { dataGrid.option('pager.showPageSizeSelector', data.value); }, }); $('#showInfo').dxCheckBox({ text: 'Show Info Text', value: true, onValueChanged(data) { dataGrid.option('pager.showInfo', data.value); }, }).dxCheckBox('instance'); const navButtons = $('#showNavButtons').dxCheckBox({ text: 'Show Navigation Buttons', value: true, onValueChanged(data) { dataGrid.option('pager.showNavigationButtons', data.value); }, }).dxCheckBox('instance'); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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=5.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> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.2.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="js/dx.all.js?v=25.2.7"></script> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="data-grid-demo"> <div id="gridContainer"></div> <div class="options"> <div class="caption">Options</div> <div class="option-container"> <div class="option"> <div id="displayMode"></div> </div> <div class="option"> <div id="showPageSizes"></div> </div> <div class="option"> <div id="showInfo"></div> </div> <div class="option"> <div id="showNavButtons"></div> </div> </div> </div> </div> </div> </body> </html>
#gridContainer { max-height: 800px; } .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: relative; } .caption { font-size: 18px; font-weight: 500; } .option-container { display: flex; margin: 0 auto; justify-content: space-between; } .option { margin-top: 10px; display: flex; align-items: center; } .option-caption { white-space: nowrap; margin: 0 8px; }
let s = 123456789; function random() { s = (1103515245 * s + 12345) % 2147483647; return s % (10 - 1); } function generateData(count) { let i; const surnames = ['Smith', 'Johnson', 'Brown', 'Taylor', 'Anderson', 'Harris', 'Clark', 'Allen', 'Scott', 'Carter']; const names = ['James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty']; const gender = ['Male', 'Female']; const items = []; const startBirthDate = Date.parse('1/1/1975'); const endBirthDate = Date.parse('1/1/1992'); for (i = 0; i < count; i += 1) { const birthDate = new Date(startBirthDate + Math.floor( (random() * (endBirthDate - startBirthDate)) / 10, )); birthDate.setHours(12); const nameIndex = random(); const item = { id: i + 1, firstName: names[nameIndex], lastName: surnames[random()], gender: gender[Math.floor(nameIndex / 5)], birthDate, }; items.push(item); } return items; }

The built-in Grid pager contains the following UI elements:

  • Page navigator
    Enables page navigation.

  • Page size selector
    Changes page size. To display this element, enable the showPageSizeSelector property. You can also define allowed page sizes and specify the initial page size.

  • Page information
    Displays current page number and total record count. To display page information, enable the showInfo property. You can customize this information text as needed.

The DevExtreme JavaScript DataGrid’s built-in pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager uses less screen space. In adaptive mode, the JavaScript DataGrid automatically selects between full and compact modes based on the component width.

The DevExtreme JavaScript DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone Pagination component to navigate the JavaScript DataGrid. For additional information, refer to the following example: DevExtreme JavaScript DataGrid - Display a Pager Above the Grid.