分页组件的简单实现（初稿）

分页功能是后台管理系统中很常见的一个功能，今天我们就来看下如何实现一个简单的分页组件。

初步实现

首先从最简单的情况考虑，假设一共有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

经过测试，发现我们打印出来的结果都是正确的，至此，生成页面上按钮个数和按钮页数的函数已经写好了。