全栈角度看分页处理

作者：京东物流杨攀

分页是 web application 开发最常见的功能。在使用不同的框架和工具过程中，发现初始行/页的定义不同，特意整理记录。从这个技术点去看不同层的实现。以及不同语言实现的对比。
文章会从正常的web 结构分层的角度去梳理不同层的处理。
分为数据库分页、服务端分页、前端分页

数据库分页

这里用mysql 举例整理。我们常用的数据库例如 Oracle/ SQL Server 等，对于分页语法的支持大同小异。不做具体一一举例。
先从数据库层梳理，也是从最根源去分析分页的最终目的，前端和后端的一起逻辑和适配，都是为了拼接合适的 SQL 语句。

①MySQL LIMIT

语法：[LIMIT {[offset,] row_count}]

LIMIT row_count is equivalent to LIMIT 0, row_count.

The offset of the initial row is 0 (not 1)

参考：MySQL :: MySQL 5.7 Reference Manual :: 13.2.9 SELECT Statement

服务端/后端分页

后端分页，简单讲，就是数据库的分页。对于mysql 来讲，就是上述 offset row_count 的计算过程。
这里选用了常用的框架组件来对比各自实现的细节。
pagehelper 是Java Orm 框架mybatis 常用的开源分页插件
spring-data-jdbc 是Java 框架常用的数据层组件

①pagehelper

1/**
2 * 计算起止行号  offset
3 * @see com.github.pagehelper.Page#calculateStartAndEndRow
4 */
5private void calculateStartAndEndRow() {
6    // pageNum 页码，从1开始。 pageNum < 1 , 忽略计算。
7    this.startRow = this.pageNum > 0 ? (this.pageNum - 1) * this.pageSize : 0;
8    this.endRow = this.startRow + this.pageSize * (this.pageNum > 0 ? 1 : 0);
9}

1/**
2 * 计算总页数 pages/ pageCount。 
3 * 在赋值数据总条数的同时，也计算了总页数。
4 * 可以与 Math.ceil 实现对比看。
5 */
6public void setTotal(long total) {
7    if (pageSize > 0) {
8        pages = (int) (total / pageSize + ((total % pageSize == 0) ? 0 : 1));
9    } else {
10        pages = 0;
11    }
12}

SQL 拼接实现： com.github.pagehelper.dialect.helper.MySqlDialect

②spring-data-jdbc

关键类：

org.springframework.data.domain.Pageable

org.springframework.data.web.PageableDefault

1/**
2 * offset 计算，不同于pagehelper， page 页码从0 开始。 default is 0
3 * @see org.springframework.data.domain.AbstractPageRequest#getOffset
4 */
5public long getOffset() {
6    return (long)this.page * (long)this.size;
7}
8
9/*
10 * 总页数的计算使用 Math.ceil 实现。
11 * @see org.springframework.data.domain.Page#getTotalPages()
12 */
13@Override
14public int getTotalPages() {
15    return getSize() == 0 ? 1 : (int) Math.ceil((double) total / (double) getSize());
16}

1/**
2 * offset 计算，不同于pagehelper， page 页码从0 开始。
3 * @see org.springframework.data.jdbc.core.convert.SqlGenerator#applyPagination
4 */
5private SelectBuilder.SelectOrdered applyPagination(Pageable pageable, SelectBuilder.SelectOrdered select) {
6    // 在spring-data-relation, Limit 抽象为 SelectLimitOffset 
7    SelectBuilder.SelectLimitOffset limitable = (SelectBuilder.SelectLimitOffset) select;
8    // To read the first 20 rows from start use limitOffset(20, 0). to read the next 20 use limitOffset(20, 20).
9    SelectBuilder.SelectLimitOffset limitResult = limitable.limitOffset(pageable.getPageSize(), pageable.getOffset());
10
11    return (SelectBuilder.SelectOrdered) limitResult;
12}

spring-data-commons 提供 mvc 层的分页参数处理器

1/**
2 * Annotation to set defaults when injecting a {@link org.springframework.data.domain.Pageable} into a controller method. 
3 *
4 * @see org.springframework.data.web.PageableDefault
5 */
6@Documented
7@Retention(RetentionPolicy.RUNTIME)
8@Target(ElementType.PARAMETER)
9public @interface PageableDefault {
10
11    /**
12     * The default-size the injected {@link org.springframework.data.domain.Pageable} should get if no corresponding
13     * parameter defined in request (default is 10).
14     */
15    int size() default 10;
16
17    /**
18     * The default-pagenumber the injected {@link org.springframework.data.domain.Pageable} should get if no corresponding
19     * parameter defined in request (default is 0).
20     */
21    int page() default 0;
22}

MVC 参数处理器： org.springframework.data.web.PageableHandlerMethodArgumentResolver

前端分页

前端展示层，分别从服务端渲染方案以及纯前端脚本方案去看分页最终的页面呈现逻辑。
这里选取的分别是Java 常用的模板引擎 thymeleaf 以及热门的前端框架 element-ui。
从用法以及组件源码角度，去理清终端处理分页的常见方式。

①thymeleaf - 模板引擎

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

1<!-- spring-data-examples\web\example\src\main\resources\templates\users.html-->
2<nav>
3  <!-- class样式 bootstrap 默认的分页用法-->
4  <ul class="pagination" th:with="total = ${users.totalPages}">
5    <li th:if="${users.hasPrevious()}">
6      <a th:href="@{/users(page=${users.previousPageable().pageNumber},size=${users.size})}" aria-label="Previous">
7        <span aria-hidden="true">«</span>
8      </a>
9    </li>
10    <!-- spring-data-examples 分页计算从0 开始， /users?page=0&size=10 -->
11    <!-- 生成页码列表，呈现形式即我们常见的 ①②③④ -->
12    <li th:each="page : ${#numbers.sequence(0, total - 1)}"><a th:href="@{/users(page=${page},size=${users.size})}" th:text="${page + 1}">1</a></li>
13    <li th:if="${users.hasNext()}">
14    <!-- 下一页实现，因为是服务器端渲染生成。在最终生成的html 中，这里的href 是固定的。实现思路和纯前端技术，使用javascript 脚本对比看 -->
15      <a th:href="@{/users(page=${users.nextPageable().pageNumber},size=${users.size})}" aria-label="Next">
16        <span aria-hidden="true">»</span>
17      </a>
18    </li>
19  </ul>
20</nav>

②element-ui 前端框架

1// from node_modules\element-ui\packages\pagination\src\pagination.js
2// page-count 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；
3computed: {
4  internalPageCount() {
5    if (typeof this.total === 'number') {
6      // 页数计算使用 Math.ceil
7      return Math.max(1, Math.ceil(this.total / this.internalPageSize));
8    } else if (typeof this.pageCount === 'number') {
9      return Math.max(1, this.pageCount);
10    }
11    return null;
12  }
13},
14
15/**
16 * 起始页计算。 page 页码从1 开始。
17 */
18getValidCurrentPage(value) {
19  value = parseInt(value, 10);
20  // 从源码的实现可以看到，一个稳定强大的开源框架，在容错、边界处理的严谨和思考。
21  const havePageCount = typeof this.internalPageCount === 'number';
22
23  let resetValue;
24  if (!havePageCount) {
25    if (isNaN(value) || value < 1) resetValue = 1;
26  } else {
27    // 强制赋值起始值 1
28    if (value < 1) {
29      resetValue = 1;
30    } else if (value > this.internalPageCount) {
31      // 数据越界，强制拉回到PageCount
32      resetValue = this.internalPageCount;
33    }
34  }
35
36  if (resetValue === undefined && isNaN(value)) {
37    resetValue = 1;
38  } else if (resetValue === 0) {
39    resetValue = 1;
40  }
41
42  return resetValue === undefined ? value : resetValue;
43},

总结

技术永远是关联的，思路永远是相似的，方案永远是相通的。单独的去分析某个技术或者原理，总是有边界和困惑存在。纵向拉伸，横向对比才能对技术方案有深刻的理解。在实战应用中，能灵活自如。
分页实现的方案最终是由数据库决定的，对于众多的数据库，通过SQL 语法的规范去框定，以及我们常用的各种组件或者插件去适配。
纵向对比，我们可以看到不同技术层的职责和通用适配的实现过程，对于我们日常的业务通用开发以及不同业务的兼容有很大的借鉴意义。
横向对比，例如前端展示层的实现思路，其实差别非常大。如果使用 thymeleaf，结构简单清晰，但交互响应上都会通过服务器。如果选用element-ui，分页只依赖展示层，和服务端彻底解构。在技术选型中可以根据各自的优缺点进行适度的抉择。