Laravel分页优化：添加消息计数与完善导航分页功能

咱们先拆解需求：要在现有分页基础上，添加显示当前条目范围/总条数的消息计数，以及带数字的部分分页导航。下面一步步来修改你的代码：

1. 添加消息计数 #

Laravel的分页实例自带了几个实用方法来获取条目统计信息：

• $paginator->firstItem()：当前页第一条数据的序号
• $paginator->lastItem()：当前页最后一条数据的序号
• $paginator->total()：数据总条数（注意：如果用的是simplePaginate简单分页，这个方法不可用，需改用其他方式，不过你用了hasPages()，应该是普通分页场景）

可以在分页控件上方添加这段计数代码：

<div class="pagination-info mb-3">
    显示第 {{ $paginator->firstItem() }} 至 {{ $paginator->lastItem() }} 条，共 {{ $paginator->total() }} 条消息
</div>

2. 实现部分数字导航 #

我们要做一个常见的分页效果：显示第一页、当前页前后2页、最后页，中间用省略号处理过长的页码列表。下面把这个逻辑和你原有的上/下一页按钮整合起来：

完整的分页代码 #

替换你原来的代码，下面是整合后的完整实现：

@if ($paginator->hasPages())
    <!-- 消息计数区域 -->
    <div class="pagination-info mb-3">
        显示第 {{ $paginator->firstItem() }} 至 {{ $paginator->lastItem() }} 条，共 {{ $paginator->total() }} 条消息
    </div>

    <ul class="unstyled inbox-pagination">
        <!-- 上一页按钮 -->
        @if ($paginator->onFirstPage())
            <li>
                <a class="pl-15 pr-15 disabled" aria-disabled="true">
                    <i class="fa fa-angle-left pagination-left"></i>
                </a>
            </li>
        @else
            <li>
                <a class="pl-15 pr-15" href="{{ $paginator->previousPageUrl() }}" rel="prev">
                    <i class="fa fa-angle-left pagination-left"></i>
                </a>
            </li>
        @endif

        <!-- 数字页码导航 -->
        @php
            $currentPage = $paginator->currentPage();
            $lastPage = $paginator->lastPage();
            // 计算显示的页码范围：当前页前后各2页
            $startPage = max(1, $currentPage - 2);
            $endPage = min($lastPage, $currentPage + 2);
        @endphp

        <!-- 显示第一页和省略号（如果当前页离第一页较远） -->
        @if ($startPage > 1)
            <li><a href="{{ $paginator->url(1) }}">1</a></li>
            @if ($startPage > 2)
                <li><span class="ellipsis">...</span></li>
            @endif
        @endif

        <!-- 显示中间的页码 -->
        @for ($page = $startPage; $page <= $endPage; $page++)
            <li class="{{ $page == $currentPage ? 'active' : '' }}">
                <a href="{{ $paginator->url($page) }}">{{ $page }}</a>
            </li>
        @endfor

        <!-- 显示最后一页和省略号（如果当前页离最后页较远） -->
        @if ($endPage < $lastPage)
            @if ($endPage < $lastPage - 1)
                <li><span class="ellipsis">...</span></li>
            @endif
            <li><a href="{{ $paginator->url($lastPage) }}">{{ $lastPage }}</a></li>
        @endif

        <!-- 下一页按钮 -->
        @if ($paginator->hasMorePages())
            <li>
                <a href="{{ $paginator->nextPageUrl() }}" rel="next">
                    <i class="fa fa-angle-right pagination-right"></i>
                </a>
            </li>
        @else
            <li>
                <a class="disabled" aria-disabled="true">
                    <i class="fa fa-angle-right pagination-right"></i>
                </a>
            </li>
        @endif
    </ul>
@endif

3. 样式优化（可选） #

可以给激活状态的页码、省略号加一些样式，让分页更美观：

.inbox-pagination li.active a {
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
}
.inbox-pagination .ellipsis {
    padding: 0 10px;
    color: #999;
    cursor: default;
}
.inbox-pagination .disabled {
    color: #ccc;
    pointer-events: none;
}

改完之后，你的分页就具备了完整功能：

• 清晰的消息计数，让用户直观了解当前浏览范围
• 灵活的数字导航，支持跳转到指定页码，同时用省略号优化长分页的显示
• 保留原有的上/下一页按钮，且给禁用状态添加了样式提示

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