I have a PagedListPager which navigates through several hundred items, 20 items per page. This works fine and the first and last item Ids are displayed above the row of pager buttons.
However, to make navigation easier, is there any way of getting the page buttons to display what Ids are on that page just by hovering over the button?
The current page and its range is displayed on the webpage, but, to help navigation to other pages, I would like the user to be able to hover over each button to see the range of records on each page. I am using X.PagedList, the code that displays the pagedlist is:
@Html.PagedListPager((IPagedList)Model.BoAPApplicantPagedList, page => Url.Action("Applications", "BOAPAdmin", new { page = page }), new PagedListRenderOptions()
{
ContainerDivClasses = new[] { "navigation" },
LiElementClasses = new[] { "page-applicant" },
LinkToNextPageFormat = ">",
LinkToPreviousPageFormat = "<",
DisplayLinkToIndividualPages=true,
MaximumPageNumbersToDisplay=40
The page displayed shows as:
4
Here is an example for your reference:
First, I get the page number of each button through jQuery.
Then calculate the record range corresponding to the page number: according to the size of each page (PageSize) and the total number of records (TotalItemCount), calculate the start and end record IDs of the page.
Finally, set a hover event on each paging button and dynamically display the record range corresponding to the page number.
@using X.PagedList.Mvc.Core
@using X.PagedList
@model IPagedList<User>
@{
var pageSize = Model.PageSize;
var totalItemCount = Model.TotalItemCount;
}
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach (var user in Model)
{
<tr>
<td>@user.Id</td>
<td>@user.Name</td>
<td>@user.Email</td>
</tr>
}
</tbody>
</table>
<div id="pagination">
@Html.PagedListPager((IPagedList)Model, page => Url.Action("Index", new { page }), new PagedListRenderOptions
{
ContainerDivClasses = new[] { "pagination" },
DisplayLinkToIndividualPages = true,
MaximumPageNumbersToDisplay = 10
})
</div>
<script>
var pageSize = @Model.PageSize;
var totalItemCount = @Model.TotalItemCount;
</script>
@section Scripts {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('#pagination .pagination li').each(function () {
var page = parseInt($(this).find('a').text());
var startRecordId = (page - 1) * pageSize + 1;
var endRecordId = Math.min(page * pageSize, totalItemCount);
$(this).hover(function () {
$(this).find('a').attr('title', 'Display ID from ' + startRecordId + ' to ' + endRecordId);
});
});
});
</script>
}
When I hover my mouse over the button:
1