分页组件的简单实现（初稿）
分页功能是后台管理系统中很常见的一个功能，今天我们就来看下如何实现一个简单的分页组件。
初步实现
首先从最简单的情况考虑，假设一共有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现在我们把这段代码封装成一个函数，将currentPage和showPages作为变量抽象出来。
function slicePage(currentPage,showPages) {
var begin=currentPage;
var end=begin+showPages;
for(var i=begin;
i特殊情况时
假设页面上的数据只有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如果我们传的参数是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在这种情况下，结果都是正常的。但是并没有结束，我们还要对当前页在开始，中间，结尾部分这几种情况进行测试。
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
【分页组件的简单实现（初稿）】经过测试，发现我们打印出来的结果都是正确的，至此，生成页面上按钮个数和按钮页数的函数已经写好了。
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量