工作上有个需求，后端就返回一个总条数，剩余的要求前端来主控分页效果。
一开始觉得不太可能，但想想，又好像变得easy到没话说，菜鸟前端一枚，分享下开发思路。
默认先把HTML分页代码敲好（图1-1），这里是直接找大名鼎鼎的bootstrap分页效果来使用。
图1-1
既然是分页，默认是先定义一个function。
分页有可能会跳到最后一页，也有可能是跳到某一页。所以，默认给一个参数。作为传入要跳转的对应页面。
代码敲完，应该是下面这样的（图2-1）
图2-1
看效果图（图1-1），知道左右两侧的箭头是无论跳转到多少页，始终不变，并且一直停留在页面上。
这时，我们在内存抢两个位置给他们坐着~(～￣▽￣)～（图2-2）
图2-2
接着，我们再细想，假设一共总页数是 16 页。如果用户跳到了第 10 页，效果应该是如下（图1-2）。
图1-2
这时，我们直接按照该效果图，渲染页面效果出来（图2-3）。
图2-3
这里循环渲染有个思想，初始化 i 必须等于当前页的小两个数，这样就可以从第 8 页开始了。
但又不可以把当前页后面的值也渲染出来，所以后面添加下条件限制，渲染到当前页后两页为止。（图中是写 3 ），是因为判断语句要保留5位数默认要添加多一个数值做限制。
因为有可能是在最后倒数第二页，所以我们还需要把总条数也添加上去。总条数一开始定义在头部，忘了截图给大家看了╮(╯﹏╰）╭(图2-7)
图2-7
这样，如果假设只有 11 页的时候，当停留在第 10 页，后面也只会显示 第 11 页，不会显示第 12 页，确保用户不会点击到空白按钮，跳转到空白页面去。
再想，当用户跳转页面的时候，我们需要知道他是停留在第一页还是停留在最后一页。
停留在第一页时，上一页的按钮是失效状态，一般都是隐藏起来。同理，停留在最后一页，下一页的按钮也是失效状态，也需要隐藏。
所以，我们添加下判断条件，继续写٩(๑❛ᴗ❛๑)۶（图2-4）。
图2-4
此时，我们已完成了主要核心的功能和效果，但我们还需要在生成的每个按钮上面，添加该主函数方法，
方便为下一次切换页面时，能够触发该方法再一次（图2-5）。
图2-5
到此，分页的对应页面效果已完成。
但 “上一页” 按钮和 “下一页” 按钮该怎么触发呢？（图2-6）
图2-6
最后，该分页控件基本完成。
结束语
当然，业务上的需求永远比这个入门级的更复杂。
一开始是想把全部都讲解详细到一整套，但无奈怕讲的太深，怕有些童鞋一时理解不过来。
所以就抽了核心部分思想写了这篇入门级。
最终我实现的效果图是如下（图1-3）。
欢迎有兴趣的同学敲敲键盘学起来。
图1-3
网友评论