Web开发之分页算法，N(N>=3)种解决方案

在Web开发中，分页是最常用的一个功能了。但是，想简单、灵活、方便地解决分页这个问题，还是需要动点脑筋的。

今天，简要梳理下，过去6年中，亲自遇到的分页问题和解决办法。

1. 定义问题

原由：在页面中需要展示若干数据，但不可能一次展示所有的，想通过每次只展示若干条。分页数，pageNo，是为了标记，当前访问的内容在哪里。

后端需要做的：后端需要分页查询数据，把数据返回给前端

前端需要做的：根据后端的数据，构造“1、2、3”等分页面板，并且要响应事件，比如点击“2”，就跳转到第2页

2. 2种思路

解决方法有很多种，我只想根据几个指标，列出几种典型的解决方法。

2.1分页所有相关逻辑，全部由“后端实现”
  
  a. 获取数据库中的数据
   根据totalPage（需要先查询一次数据库）和pageSize，计算总共有多少也totalPage。
  
   然后生成前端js分页，前端直接显示分页js代码${pagejs}。
    
   点击前端分页链接时，后端再根据当前页数pageNo和每页显示的条数pageSize，获取数据。

默认显示第1页。
   
  注：这种全部由后端生成分页的方法，我见过，不过，我不喜欢这种做法。由后端生成前端分页js，感觉太别扭了。

我的观点：前端负责前端的事，后端负责后端的事，尽量不互相影响。

2.2后端只负责数据查询，前端负责构造分页js。
   后端计算count，获取一页数据list。如果用Mybatis，可以写一个拦截器，或者工具方法，自动去查询count。因为count的sql可以根据list的sql来构造，所以能自动化。

前端根据分页完整信息page，构造js。

3.同步or异步
   前端的分页，可以选择“同步刷新“，每次打开新的页面（可能直接覆盖当前页，让人看起来没有重新刷新页面）。
   也可以选择“异步刷新”，发送AJAX请求，替换分页内容。

不同点在于，同步刷新，需要构造“URL”，URL带上了分页信息pageNo，pageSize,也可能需要带上各种查询参数，比如用户名username.
  异步刷新，需要给分页“1”绑定事件响应函数，分页组件需要把这个“回调函数”，提取出来，可以由分页调用者传入。另外一点，分页组件会自动记住查询参数和分页信息。这一点，比同步构造url要简单一些。
  
4.表格型or内容型 
   分页展示的内容可能是表格型，比如“uid uname time money”，一个用户的资金记录，也可能是一页内容，比如一篇文章下方展示10条评论。

表格型的布局展示相对更加“标准化” ，而内容型则变化较大，通常需要自己去构造。
   或者，对表格型的组件进行改进，把“渲染一行内容” 提取成函数，可以让调用者自己传入“渲染方法”，从而达到“复用”的目的。

5.我的实践与选择

a.前端与后端分离，后端查询数据，前端负责展示数据，后端不会生成前端需要的js和html等内容。

b.表格型-异步
    参考秒针前同事写的st-grid，即网上最流行的标准化表格型grid分页组件。
   或者从网上找，比如jquery等各种整套前端框架，都会有这个组件

c.表格型-同步
   前端用JSTL、Freemarker、Struts标签、JSP标签等模版技术，生成分页条，表格内容写个for循环。
   这个地方的分页条，也可以用JS来实现，不过麻烦一点。

同步型的，需要在URL中带上各种分页参数和查询条件，想做成通用的，有一定难度。

d.内容型-异步
    后端都一样，前端写AJAX方法，构造html，再渲染。
    这个是我在写个人官网时，遇到的“新场景”，全部代码，都由我根据其它方式的代码，改造而来。
   显示1篇文章，下方显示若干评论，点击下一页，评论刷新，文章不刷新。

e.内容型-同步 
    与“表格型-同步” 类似，唯一不同的是，for循环生成的不是table，而是div，布局更好看。

6.扯点别的
   代码，我就不贴了，排版很麻烦，而且代码一大堆。这么多种场景，每一种场景的实际代码，都不少。有机会，今后再详细阐述。

通过分页这个事，我再次发现，技术的一个难点就在于，实际的业务或需求有很多种场景，不同场景下的技术实现思路是不同的。想“一次编写，处处使用”非常难。可行的方法是，“一种场景，尽量只编写一次代码，保证这个场景下是万能的就很厉害了”。

写完这篇文章，我猛然发现，可能以前就发现了，在某些领域，我比很多“高级工程师”都要厉害。为什么呢？每个技术工作者在实际工作中遇到的问题是不同的，“术业有专攻”，每个人都在自己的兴趣和工作范围内的事情更为擅长。

今天就扯到这吧，更多关于“技术观点” 的，将放在“雷观”中详细阐述。

总之，我比2年前，刚刚毕业的时候，要强太多了。青春流逝了，我也成长了。

小雷FansUnion-博学的互联网技术工作者
个人官网：http://FansUnion.cn
2014年12月6日

湖北-武汉-循礼门

原文首发：http://fansunion.cn/article/detail/541.html