Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
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;
}