devextreme уже предоставляет функции нумерации страниц, как мы видим на изображении выше.
Если мы хотим перейти непосредственно на страницу 155, мы можем перейти на эту конкретную страницу, щелкнув страницу за страницей. Это трудоемкий процесс. У нас нет возможности перейти на эту конкретную страницу нет. В этом случае мы применяем пользовательскую нумерацию страниц, чтобы напрямую получить любой номер страницы.

На изображении ниже информация о подкачке является пользовательской. Я сделал номер страницы, например 1, это гиперссылка, когда вы щелкнете по ней, откроется редактор текстового поля, и вы можете указать номер страницы, как вы хотите перемещаться, а затем нажмите «Ввод». Вы можете легко перемещаться по этому конкретному номеру страницы. Вы можете увидеть следующее изображение

// DataGrid code
$("#gridContainer").dxDataGrid({
.........
paging: {
pageSize: 5,
enabled: true
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [5, 10, 20],
showInfo: true,

showNavigationButtons: true,
infoText: "{1}",
visible:true,
},
});
onContentReady: function (e) {
$('#gridContainer .dx-info').css('display', 'none');
$('#gridContainer .dx-pager').addClass('col-12');
var gridId = 'groupManagementDataGrid';
customPagingGlobal(gridId);
$('#groupManagementDataGrid .dx-info').css('display', 'none');
$("#groupManagementDataGrid .PageHyperLink" + gridId).css({
'margin-left': '5px',
});
if (!$('#groupManagementDataGrid').hasClass('inputBox' + gridId)) {
console.log(" does not have class---------");
$("#groupManagementDataGrid .inputBox" + gridId).css({
'margin-left': '10px',
'height': '33px',
'width': '70px',
});
}
//End...
} Создайте отдельную функцию для создания пользовательской разбивки на страницы, а затем вызовите эту функцию в функции ContentReady. function customPagingGlobal(gridId) {
var gridInstance = $('#' + gridId).dxDataGrid('instance');
var currentPageNumber = gridInstance.pageIndex() + 1;
var totalPages = gridInstance.pageCount();
var totalNoOfRow = gridInstance.totalCount();
var pageNoHyplerLink = 'PageHyperLink' + gridId;
varmainParentDiv = $("<div class='pagingNo mainDiv float-left col-7'></div>");
varcustomPaging = $("<span class='pageContainer' style='float:right; display:flex;margin-top:6px; margin-right:-37px;'><div class='text-right'>Page</div></span>");
customPaging.append($("<a class='" + pageNoHyplerLink+"' href=# onclick=pageNumberEditorBox('" + gridId+"')>" + currentPageNumber + "</a>"))
customPaging.append($("<div>").dxNumberBox({
stylingMode: "outlined",
elementAttr: { class: "inputBox"+gridId },
value: currentPageNumber,
showSpinButtons: true,
width: 78,
min: 1,
max: totalPages,
visible: false,
onValueChanged: function (e) {
pageNoValueBtnGlobal(gridId, e)
}
}));
var lastPageNo = 'lastPageNo' + gridId;
var totalRows = 'totalRows' + gridId;
customPaging.append($("<div class='" + lastPageNo+"' style='margin-left:5px'> of " + totalPages + "</div>"));
customPaging.append($("<div class='" + totalRows+"' style='font-weight: 400; margin-left:5px;'>(" + totalNoOfRow + " items)</div>"));
mainParentDiv.html(customPaging);
$("#" + gridId + " .dx-datagrid-pager.dx-pager .dx-page-sizes").after(mainParentDiv)
}
function pageNoValueBtnGlobal(gridId,e) {
var changePageNo = parseInt(e.value) - 1;
$("#" + gridId).dxDataGrid("instance").pageIndex(changePageNo);
}
function pageNumberEditorBox(gridId) {
var screenSize = $(window).width();
if (screenSize > 500) {
$('.inputBox' + gridId).dxNumberBox('instance').option('visible', true);
$('.PageHyperLink' + gridId).css('display', 'none');
$(".lastPageNo" + gridId).css('margin-right', '5px');
}
$('.inputBox' + gridId).css({
'margin-left': '0px',
'width': '75px',
'margin-top': '-8px',
});
$('.totalRows' + gridId).css({
'margin-left': '0px',
});
}

В коде я создал общее имя функции«customPagingGlobal(gridId)», передал GridId в качестве параметра и вызвал эту функцию в функции onContenReady. Вы можете вызвать эту функцию в любой сетке, где вы хотите применить пользовательское разбиение на страницы. Вам нужно только передать этот идентификатор сетки в качестве параметра.

Webner Solutions — компания по разработке программного обеспечения, специализирующаяся на разработке систем управления страховыми агентствами, систем управления обучением и приложений Salesforce. Свяжитесь с нами по адресу [email protected] для подачи заявок на страхование, электронное обучение и Salesforce.

Первоначально опубликовано на https://blog.webnersolutions.com 5 апреля 2021 г.