透过分页思考

其实我算不上真正的前端，没写过完整的函数，只是会点jquery事件，最近有机会尝试写个分页，在大牛的帮助下，我第一次理清了自己的思路，还是很有成就感的，虽然是很笨的方法。


我一直觉得自己不适合写程序，大学时就没入门，根本就没有那个思路，一循环就晕了，哈哈，但是有时候能想明白一些事情，还是灰常开心地，就让我从今天开始努力码代码吧，O(∩_∩)O哈哈~

先分析问题

1. 画逻辑图

   1@ 2 3 ... 20 >
   < 1 2@ 3 ... 20 >
   < 1 2 3@ 4 ... 20 >
   < 1 2 3 4@ 5 ... 20 >
   < 1 ... 4 5@ 6 ... 20 >
   < 1 ... 5 6@ 7 ... 20 >
   ...
   < 1 ... 15 16@ 17 ... 20 >
   < 1 ... 16 17@ 18 19 20 >
   < 1 ... 17 18@ 19 20 >
   < 1 ... 18 19@ 20 >
   < 1 ... 18 19 20@
   

2. 分析找规律

3. 提取公共函数
4. 整理思路码代码
5. 测试每一种情况是否走得通（我这种考虑问题不周全的，需要时间较长）

##我的奇葩思路

5页为一个分界点

1. 选择的页数<5页时

   1.1 总页数<5
   1.2 总页数>5，选择第1页
   1.3 总页数>5，选择非第1页
   

2. 选择页数大于5页时

   2.1 选择最后一页时
   2.2 选择倒数4页时
   2.3 选择6到倒数第5页时
   

##附上码好的代码

$(function() {

var maxSpan = 5,currentPageNumber=1;

var pagesCount = 5;
var initPage = function(r) {
    // json
     r=7;
     pagesCount = r;
    ChangeSelectedPageNumber(1);
};

$("#_pagination").delegate("li[data-id]", "click", function() {
    var dataId = parseInt($(this).attr("data-id"));
    ChangeSelectedPageNumber(dataId);       
});

$("#_pagination").delegate("#perPage:not(.disabled)", "click", function() {
    ChangeSelectedPageNumber(currentPageNumber - 1);
});

$("#_pagination").delegate("#nextPage:not(.disabled)", "click", function() {
    ChangeSelectedPageNumber(currentPageNumber + 1);
});

var GetPageNumberLiHtml = function(pageNumber)
{
    return "<li data-id="+pageNumber+">"+pageNumber+"</li>"
}

var ChangeSelectedPageNumber = function(selectedPageNumber) 
{
    currentPageNumber = selectedPageNumber;
    // loadCinemas();
    var html = [];
    html.push("<li id='perPage'>上一页</li>");

    if(selectedPageNumber < maxSpan)
    {
        //总页数五页以下时
        if( pagesCount <= maxSpan){
            for(var i=1; i <= pagesCount; i++){
                html.push(GetPageNumberLiHtml(i));
            }
        }
        // 总页数大于五页，选择第一页
        if (selectedPageNumber == 1 && pagesCount > maxSpan) {
            html.push(GetPageNumberLiHtml(1));
            html.push(GetPageNumberLiHtml(2));
            html.push(GetPageNumberLiHtml(3));
            html.push("<li class='disabled'> ... </li>");
            html.push(GetPageNumberLiHtml(pagesCount));
        };
        // 总页数大于五页，选择非第一页时
        if(pagesCount > maxSpan && selectedPageNumber !== 1){
            for(var i=1; i <= selectedPageNumber; i++){
                html.push(GetPageNumberLiHtml(i));
            }
                html.push(GetPageNumberLiHtml(selectedPageNumber+1));
                html.push("<li class='disabled'> ... </li>");
                html.push(GetPageNumberLiHtml(pagesCount));
            }             
    }
    //选中页数大于5页时
    else 
    {
        html.push(GetPageNumberLiHtml(1));
        //选择最后一页时
        if(selectedPageNumber == pagesCount){
            html.push("<li class='disabled'> ... </li>");
            html.push(GetPageNumberLiHtml(selectedPageNumber - 2));
            html.push(GetPageNumberLiHtml(selectedPageNumber - 1));
            // 当前选
            html.push(GetPageNumberLiHtml(selectedPageNumber));
        }
        //选择倒数4页时
        else if((pagesCount - selectedPageNumber) < maxSpan-1){
            html.push("<li class='disabled'> ... </li>");
            for (var i = selectedPageNumber - 1; i <= pagesCount; i++) 
            {
                html.push(GetPageNumberLiHtml(i));
            };
        }
        //选择中间页时
        else if((pagesCount - selectedPageNumber) >= maxSpan-1){
            html.push("<li class='disabled'> ... </li>");
            html.push(GetPageNumberLiHtml(selectedPageNumber - 1));
            html.push(GetPageNumberLiHtml(selectedPageNumber));
            html.push(GetPageNumberLiHtml(selectedPageNumber + 1));
            html.push("<li class='disabled'> ... </li>");
            html.push(GetPageNumberLiHtml(pagesCount));
        }

    }


    html.push("<li id='nextPage'>下一页</li>");
    $("#_pagination").html(html.join(""));

    $("#_pagination>li[data-id="+selectedPageNumber+"]").addClass("active").siblings().removeClass("active");

    if (selectedPageNumber == 1) {
        $("#perPage").addClass("disabled");
    }
    // 总页数是1 比较特殊
    if (pagesCount == 1) {
        $("#perPage").addClass("disabled");
        $("#nextPage").addClass("disabled");
        return;
    };  
    // 选择最后一页
    if(selectedPageNumber == pagesCount)
    {
        $("#nextPage").addClass("disabled");
    }

};

initPage(pagesCount);

})

##大牛的写法

http://sandbox.runjs.cn/show/iamzdb73

仅此纪念我今天失去的脑细胞~~