本文实例讲述了jQuery从零开始做一个分页组件功能。分享给大家供大家参考，具体如下：
开始一个组件，毫无目的的写代码是一个不好的习惯，要经历 分析 => 抽象 => 实现 => 应用 四个阶段。
组件DEMO地址：https://github.com/CaptainLiao/zujian/tree/master/pagination
分析需求
当前页码显示前后三页，以及在两端显示上一页、下一页
未显示的地方用 ‘…’代替
举个栗子：
假设总共有30页
当前为第一页：1 2 3 4 … 30 下一页
当前为第二页：上一页 1 2 3 4 5 … 30 下一页
当前为第三页：上一页 1 2 3 4 5 6 … 30 下一页
.
当前为第6页：上一页 1 … 3 4 5 6 7 8 9 … 30 下一页
.
当前为第29页：上一页 1 … 26 27 28 29 30 下一页
当前为第30页：上一页 1 … 27 28 29 30
抽象
分析上面的例子，发现决定输出的因素有两个：当前页码和总页数。
于是，我们设定一个函数用来表示当前页码的显示内容：
/**
* @param {Number} page 当前页
* @param {Number} totalPage 总页数
*/
function pagination(page, totalPage) {
var str = '';
// todo... return str;
}
// 运行函数，打印出值
var ret = pagination(4, 30)
console.log(ret)
>上一页 1 2 3 4 5 6 7 ... 30 下一页
实现
输入和输出都有了，接着正式开始撸：
function pagination(page, totalPage) {
var str = page;
// 这里实现当前页面显示前后三项功能
for(var i=1; i< totalPage; i++) {
if(page-i>1) {
str = page-i +' '+ str;
}
if(page + i < totalPage) {
str = str + ' ' + (page+i)
}
} // 以page为中心，向左右扩展
// 向左，先判断当前page向左的第四个数是否大于 1
if(page-4 > 1) {
str = '... ' + page;
}
// 继续向左判断
if(page >1) {
str = "上一页" + '... ' +1 +' ' +str;
}
// 向右，判断当前page向右的第四个数字是否小于 totalPage
if(page + 4 < totalPage) {
str = '... '+ str;
}
if(page < totalPage) {
str = str +' ' + totalPage +' '+ '下一页';
}
return str;
}
现在，我们可以执行下面的函数，取得我们想要的结果：
var total = 30;
for(var i = 1; i< total; i++) {
var ret = showPage(i, total);
console.log(ret)
}
至此，我们已经实现了分页的逻辑。
应用
接下来的应用就非常简单了，不外乎是给str 加一些标签和class，于是我们就得到了一个分页组件：
