The devextreme already provides pagination features as we can see in the above image.
If we want to go directly to page 155, we can go to that specific page by clicking on the page to page. This is a time-consuming process. We have no option to go to that specific page no. In this case, we apply custom pagination to get any page number directly.
In the image below, the paging Info is custom. I made a page number like 1, it is a hyperlink when you click this, a text box editor will be open and you can put the page number as you want to navigate and then click enter. You can easily navigate that specific page number. You can see the following image
// 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...
}
Create a separate function to create custom pagination and then call this function onContentReady function.
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;
var mainParentDiv = $("<div class='pagingNo mainDiv float-left col-7'></div>");
var customPaging = $("<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',
});
}
In the code, I have created a common function name “customPagingGlobal(gridId)”, and pass GridId as a parameter and call this function in the onContenReady function. You can call this function in any grid where you want to apply custom pagination, You have to only pass that Grid Id as a parameter.