一种简单分页控件的实现

1、前言

分页在展示大量数据的时候是一个常见的功能。幸运的是，常见的PHP开发框架都对分页提供了很好的支持，CodeIginator提供了一个CI_Pagination类，通过配置文件来修改分页html代码的标签；Laravel则提供了Illuminate\Pagination\Paginator类，Yii框架提供了一个yii\widgets\LinkPager类。之前做开发的时候，用过CodeIginator和ThinkPHP的分页类，感觉一般般。后面用Yii做后台管理系统，不喜欢Yii对前端的过度干预，于是自己写了一个分页控件的实现。

2、需求与分析

要实现的分页效果如下图：

• 需要显示记录总数、每页记录数、总页数、当前页
• 用户能够调整每页显示的记录数
• 分页导航能够直接导航到第一页、最后一页、当前页的上一页和下一页，除此之外，显示10个分页链接，分别为当前页前5页、当前页、当前页后4页

3、实现与用法

<div class="row" style="margin-top:20px">
  <!-- 显示记录概况 -->
  <div class="pull-left" style="margin-left:20px">
    总共 <kbd><?=$total;?></kbd>条记录&nbsp;&nbsp;每页<kbd><?=$pageSize;?></kbd>条&nbsp;&nbsp;总页数: <kbd><?=$totalPages;?></kbd>&nbsp;&nbsp;当前页: <kbd><?=$page;?></kbd>
  </div>
  <div class="pull-left" style="margin-left:20px">
    <label>每页显示：</label>
    <!-- 用js动态改变每页显示记录数 -->
    <input type="text" style="width:50px" value="<?=$pageSize;?>" onchange="javascript:window.location.href=window.location.href+'&pageSize='+this.value">
    条

  </div>
  <div class="pull-right" style="margin-right:20px">
    <nav>
      <ul class="pagination">
        <!-- 计算显示的第一个页码，不能够小于1 -->
        <?php $pageStart = max(1,$page-5);?>
        <!-- 计算显示的最后一个页码，不能超过总页数 -->
        <?php $pageEnd   = min($totalPages, $pageStart+9);?>
        <li>
          <!-- 第一页的链接 -->
          <a href="<?php echo $url . '&page=1';?>">首页</a>
        </li>
        <li>
          <!-- 上一页的链接，当前页为显示的第一个页码，链接改为“#” -->
          <a href="<?php if($page == $pageStart) { echo "#";} else { echo $url . '&page=' . ($page - 1);}?>" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <!-- 显示分页链接 -->
        <?php for($i = $pageStart; $i <= $pageEnd; $i++):?>
        <?php if($i == $page):?> <!-- 当前页用# -->
            <li  echo class="active">
              <a href="#"><?=$i;?></a>
            </li>
        <?php else:?>
            <li>
              <a href="<?=$url.'&page='.$i?>"><?=$i;?></a>
            </li>
        <?php endif;?>
        <?php endfor;?>

        <li>
          <!-- 上一页的链接，如果当前页为显示的最后一个页码，链接改为“#” -->
          <a href="<?php if($page == $pageEnd) { echo "#";} else { echo $url . '&page=' . ($page + 1);}?>" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
        <li>
          <!-- 最后一页的链接 -->
          <a href="<?php echo $url . '&page=' . $totalPages;?>">末页</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

分页的html代码部分借用了bootstrap框架的分页组件，实际应用时可引入bootstrap的样式文件，或者自己单独写好代码中各个class的样式。渲染该代码片段时传入$total、$pageSize、$totalPages、$page、$url参数即可，其中$url为分页链接，不包含page参数。

这种做法简单实用又清晰明了，可以把这个代码片段单独保存为一个视图文件，需要时候include进去。与用其他框架的做法相比，相当轻量级。