如何在Bootstrap 5中限制分页按钮显示数量为5个

没问题，我来帮你调整这段Razor分页代码，让它固定只显示5个页码按钮，同时保留必要的导航逻辑，避免总页数多时分页栏撑满页面。

问题分析 #

你当前的代码会循环渲染所有页码，当总页数较多时自然会导致分页栏过长。我们需要修改逻辑，只渲染围绕当前页的5个页码，同时补充上一页、下一页和省略号来完善导航体验。

修改后的代码 #

<nav aria-label="Page navigation example">
  <ul class="pagination">
    @{
        int totalPage = ViewBag.TotalPage;
        int currentPage = ViewBag.PageNumber;
        int displayPageCount = 5; // 固定显示的页码数量

        if (totalPage > 1)
        {
            // 上一页按钮
            if (currentPage > 1)
            {
                <li class="page-item">
                    @Html.ActionLink("«", "Index", "MyMission", new { area = "Task", PageNumber = currentPage - 1 }, new { @class = "page-link", aria_label = "Previous" })
                </li>
            }

            // 计算要显示的页码范围
            int startPage = currentPage - (displayPageCount / 2);
            int endPage = currentPage + (displayPageCount / 2);

            // 处理边界情况：起始页不能小于1
            if (startPage < 1)
            {
                endPage += Math.Abs(startPage - 1);
                startPage = 1;
            }

            // 处理边界情况：结束页不能大于总页数
            if (endPage > totalPage)
            {
                endPage = totalPage;
                startPage = endPage - displayPageCount + 1;
                // 如果起始页小于1，重置为1
                if (startPage < 1) startPage = 1;
            }

            // 前面的省略号（如果起始页大于1）
            if (startPage > 1)
            {
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
            }

            // 渲染页码按钮
            for (int i = startPage; i <= endPage; i++)
            {
                if (currentPage == i)
                {
                    <li class="page-item active">
                        <span class="page-link">@i <span class="sr-only">(current)</span></span>
                    </li>
                }
                else
                {
                    <li class="page-item">
                        @Html.ActionLink(i.ToString(), "Index", "MyMission", new { area = "Task", PageNumber = i }, new { @class = "page-link" })
                    </li>
                }
            }

            // 后面的省略号（如果结束页小于总页数）
            if (endPage < totalPage)
            {
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
            }

            // 下一页按钮
            if (currentPage < totalPage)
            {
                <li class="page-item">
                    @Html.ActionLink("»", "Index", "MyMission", new { area = "Task", PageNumber = currentPage + 1 }, new { @class = "page-link", aria_label = "Next" })
                </li>
            }
        }
    }
  </ul>
</nav>

逻辑说明 #

1. 固定页码数量：通过displayPageCount变量控制显示的页码数，这里设为5，你可以根据需求修改为其他数字。
2. 页码范围计算：始终让当前页处于显示的页码中间（或尽量靠近中间），自动调整起始和结束页码，避免超出总页数或小于1的边界情况。
3. 补充导航元素：添加了上一页、下一页按钮，以及前后省略号，保证用户能快速跳转到首尾页，同时分页栏长度保持固定。
4. 无障碍支持：保留了aria-label属性，符合无障碍访问标准。

这样调整后，不管总页数有多少，分页栏都会保持简洁的长度，同时不丢失完整的导航功能~

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