Your search did not match any results.

Pagination

DevExpress Pagination component allows users to navigate between pages and adjust page size at runtime. In this demo, users can browse through individual employee cards using the Pagination component.

To set up our Pagination component, specify the following options:

Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.Pagination.Employee> <div class="container"> <div id="employees" class="employees"></div> <div id="pagination"> @( Html.DevExtreme().Pagination() .ID("pagination") .ShowInfo(true) .ShowNavigationButtons(true) .AllowedPageSizes(new[] { 4, 6 }) .ItemCount(Model.Count()) .PageIndex(1) .PageSize(4) .OnOptionChanged("pagination_optionChanged") .OnInitialized("pagination_onInitialized") ) </div> </div> <script> const employees = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model)); function getPaginationInstance() { return $("#pagination").dxPagination("instance"); }; const pagination_onInitialized = () => { const pagination = getPaginationInstance(); renderEmployeeGallery(pagination.option('pageSize'), pagination.option('pageIndex')); }; const pagination_optionChanged = (evt) => { const pagination = getPaginationInstance(); if (evt.name === 'pageSize') { const pageSize = evt.value; pagination.option('pageSize', pageSize); const pageIndex = pagination.option('pageIndex'); renderEmployeeGallery(pageSize, pageIndex); } if (evt.name === 'pageIndex') { const pageSize = pagination.option('pageSize'); const pageIndex = evt.value; pagination.option('pageIndex', pageIndex); renderEmployeeGallery(pageSize, pageIndex); } }; const createEmployeeImg = (employee) => { const imageWrapper = $('<div>').addClass('employees__img-wrapper'); const img = $('<img>').addClass('employees__img'); img.attr({ src: employee.Picture, alt: employee.FullName }); imageWrapper.append(img); return imageWrapper; }; const createEmployeeInfo = (employee) => { const employeeInfo = $('<div>').addClass('employees__info'); const fullNameWrapper = $('<div>').addClass('employees__info-row'); const fullNameLabel = $('<span>').addClass('employees__info-label').text('Full Name:'); const fullName = $('<span>').addClass('employees__info-value').text(employee.FullName); fullNameWrapper.append(fullNameLabel); fullNameWrapper.append(fullName); const positionWrapper = $('<div>').addClass('employees__info-row'); const positionLabel = $('<span>').addClass('employees__info-label').text('Position:'); const position = $('<span>').addClass('employees__info-value').text(employee.Position); positionWrapper.append(positionLabel); positionWrapper.append(position); const phoneWrapper = $('<div>').addClass('employees__info-row'); const phoneLabel = $('<span>').addClass('employees__info-label').text('Phone:'); const phone = $('<span>').addClass('employees__info-value').text(employee.Phone); phoneWrapper.append(phoneLabel); phoneWrapper.append(phone); employeeInfo.append(fullNameWrapper); employeeInfo.append(positionWrapper); employeeInfo.append(phoneWrapper); return employeeInfo; }; const createEmployeeCard = (employee) => { const cardEl = $('<div>').addClass('employees__card'); const imageWrapper = createEmployeeImg(employee); const employeeInfo = createEmployeeInfo(employee); cardEl.append(imageWrapper); cardEl.append(employeeInfo); return cardEl; }; const renderEmployeeGallery = (pageSize, pageIndex) => { const $employeesContainer = $('#employees'); $employeesContainer.empty(); if (pageSize === 4) { $employeesContainer.removeClass('employees--six'); $employeesContainer.addClass('employees--forth'); } else { $employeesContainer.removeClass('employees--forth'); $employeesContainer.addClass('employees--six'); } const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); pageEmployees.forEach((employee) => { const card = createEmployeeCard(employee); $employeesContainer.append(card); }); }; </script>
using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class PaginationController : Controller { public ActionResult Overview() { return View(SampleData.PaginationEmployees); } } }
body { overflow-x: hidden; } .demo-container { display: flex; flex-direction: column; align-items: center; } .container { min-width: 720px; width: 100%; } .employees { display: flex; flex-wrap: wrap; gap: 16px; min-height: 644px; padding-bottom: 24px; } .employees__card { width: 100%; max-height: 312px; align-self: stretch; overflow: hidden; border: var(--dx-border-width) solid var(--dx-color-border); border-radius: var(--dx-border-radius); background-color: var(--dx-component-color-bg); } .employees.employees--forth .employees__card { min-width: 250px; width: 390px; flex-basis: calc(50% - 10px); } .employees.employees--six .employees__card { flex-basis: calc(33.3% - 12.5px); } .employees__img-wrapper { height: 180px; position: relative; overflow: hidden; border-bottom: var(--dx-border-width) solid var(--dx-color-border); background-color: #fff; } .employees__img { display: block; height: 220px; position: absolute; content: ""; left: 50%; top: 0; transform: translateX(-50%); } .employees__info { padding: 24px; } .employees__info-row { margin-bottom: 8px; text-wrap: nowrap; } .employees__info-label { display: inline-block; font-weight: 600; vertical-align: middle; } .employees.employees--forth .employees__info-label { width: 160px; } .employees.employees--six .employees__info-label { width: 80px; } .employees__info-value { display: inline-block; text-wrap: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; white-space: nowrap } .employees.employees--forth .employees__info-value { max-width: 180px; } .employees.employees--six .employees__info-value { max-width: 120px; }