分页功能是后台管理系统中很常见的一个功能，今天我们就来看下如何实现一个简单的分页组件。
初步实现
首先从最简单的情况考虑，假设一共有20页，页面中能出现的翻页按钮最多5个，当前页数是第10页。那么这5个页数按钮上的数字分别是10，11，12，13，14。如果点击页数11，那么这5个分页按钮的数字变为11，12，13，14，15。
从上面这种最简单的情况来看，这个分页组件应该有以下这几个变量：
- begin：起始页数，这里是10.
- currentPage：当前页，我们这里，当前页等于begin。
- endpage：html页面中最后一个分页按钮的数字。
- showPages：html页面中最多能出现几个分页按钮。
- totalPages:页数总数，这里是20
这四个变量的关系很简单:
var begin=10;
var currentPage=begin;
var showPages=5;
var end=begin+showPages;
for(var i=begin;i<end;i++){
console.log(i);//10，11，12，13，14
}
现在我们把这段代码封装成一个函数，将currentPage和showPages作为变量抽象出来。
function slicePage(currentPage,showPages) {
var begin=currentPage;
var end=begin+showPages;
for(var i=begin;i<end;i++){
console.log(i);
}
}
slicePage(5,5);
特殊情况时
假设页面上的数据只有3页，设置的翻页页数按钮有5个。那么上面的代码就会出现问题，会多显示4，5这2个按钮。所以我们需要对end进行验证。
var totalPages=3;
function slicePage(currentPage,showPages) {
var begin=currentPage;
var end=begin+showPages;
if(end>totalPages){
end=totalPages;
}
for(var i=begin;i<end;i++){
console.log(i);
}
}
slicePage(1,5);//1,2,3
如果我们传的参数是1的话，那么结果是1，2，3.看上去没什么问题，但是当我们传的参数是2的时候，打印出来的结果却是2，3.按照常理来讲没，此时页面上应该保持数量不变，结果应该还是1，2，3。只不过currentPage变成了2而已。所以我们还需要对begin进行验证。
if(end>totalPages){
end=totalPages+1;
begin=end-showPages;
begin=begin>0?begin:1;
}
现在我们再来测试一下
var totalPages=3;
function slicePage(currentPage,showPages) {
var begin=currentPage;
var end=begin+showPages;
if(end>totalPages){
end=totalPages+1;
begin=end-showPages;
begin=begin>0?begin:1;
}
for(var i=begin;i<end;i++){
console.log(i);
}
}
slicePage(2,5);//1,2,3
在这种情况下，结果都是正常的。但是并没有结束，我们还要对当前页在开始，中间，结尾部分这几种情况进行测试。
var totalPages=20;
slicePage(1,5);//1,2,3,4,5
slicePage(10,5);//10,11,12,13,14
slicePage(17,5);//16,17,18,19,20
slicePage(20,5);//16,17,18,19,20
totalPages=3;
slicePage(2,5);//1，2，3
经过测试，发现我们打印出来的结果都是正确的，至此，生成页面上按钮个数和按钮页数的函数已经写好了。
