如何为X.PagedList的PagedListPager按钮添加悬停ID范围提示？

我用X.PagedList的PagedListPager组件对数百条数据分页，每页显示20条记录，当前分页功能正常，分页按钮上方已显示当前页面的首尾条目ID。现在想提升导航便捷性，实现鼠标悬停各分页按钮时显示对应页面的记录ID范围，以下是可行方案：

当前分页渲染代码：

@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
})

可行实现方案 #

核心思路 #

利用X.PagedList提供的FunctionToTransformEachPageLink回调，给每个分页链接添加title属性（浏览器默认会在鼠标悬停时显示该属性内容），同时在后端提前计算好每个页面的记录ID范围，传递到视图中即可实现需求。

步骤1：后端计算各页面的ID范围 #

在Controller的分页接口里，先计算出每个页面对应的首尾记录ID，将结果存入字典后传到ViewModel：

// 假设数据按ID升序排列，先获取完整排序后的数据集
var allApplicants = _context.BoAPApplicants.OrderBy(a => a.Id).ToList();
int pageSize = 20;
int totalPages = (int)Math.Ceiling(allApplicants.Count / (double)pageSize);

// 存储每个页码对应的ID范围
var pageIdRanges = new Dictionary<int, string>();
for (int pageNum = 1; pageNum <= totalPages; pageNum++)
{
    int startIndex = (pageNum - 1) * pageSize;
    int endIndex = Math.Min(startIndex + pageSize - 1, allApplicants.Count - 1);
    int startId = allApplicants[startIndex].Id;
    int endId = allApplicants[endIndex].Id;
    pageIdRanges[pageNum] = $"{startId}-{endId}";
}

// 将字典赋值给ViewModel的属性，比如ViewModel.PageIdRanges
viewModel.PageIdRanges = pageIdRanges;

步骤2：修改前端分页渲染代码 #

在视图里修改PagedListRenderOptions，添加FunctionToTransformEachPageLink回调，给每个分页链接注入title属性：

@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,
    // 自定义每个分页链接的属性
    FunctionToTransformEachPageLink = (liTag, aTag, pageNumber, isCurrent) =>
    {
        if (Model.PageIdRanges.ContainsKey(pageNumber))
        {
            // 给a标签添加title属性，鼠标悬停显示ID范围
            aTag.MergeAttribute("title", $"记录ID范围：{Model.PageIdRanges[pageNumber]}");
        }
        return liTag;
    }
})

性能优化提示 #

如果数据量极大，一次性获取所有数据计算ID范围会拖慢性能，可以改用数据库查询直接计算每个页面的首尾ID：

• 用ROW_NUMBER()生成行号，再按行号范围查询首尾ID；
• 或者统计总条数后，通过分页查询每个页面的第一条和最后一条数据的ID。

内容的提问来源于stack exchange，提问作者RJPWilliams