9. 前端文章分页功能实现

经过前面几篇文章的介绍，现在已经把博客后台管理和前台界面都已经搭建好了，其中前端界面是我完全手写实现的，其中分页部分是比较麻烦的，这儿简单说下我是如何完成的。分页涉及三个要素：1、请求地址；2、每页的数量；3、当前是第几页，所以我这的的做法如下：
1. 在分页的div上添加如下属性：

<div class="pageSection" addr="/home/first" rows="3" page="1">
    <ul>
    </ul>
</div>

其中addr表示地址，rows表示每页的数量、page表示当前页索引。在页面加载时首先从后台获取要显示数据的条数，然后算出总的页数，并生成分页的标签，代码如下：

$.ajax({
    url:"/home/firstcount",
    success:function(data){
        if(data && data.msg){
            var count = parseInt(data.msg);
            if(count > 0){
                $(".pageSection ul").html("");
                var rows = parseInt($(".pageSection").attr("rows"));
                var temp = parseInt(count / rows);
                if(temp * rows == count){
                    count = temp;
                } else {
                    count = temp + 1;
                }
                for(var i=1; i<=count; i++){
                    var content = '<li class="item">' + i + '</li>';
                    $(".pageSection ul").append(content);
                }
                $(".pageSection .item:first").addClass("select");
                $(".pageSection .item").mouseenter(function(){
                    $(this).addClass("hover");
                }).mouseleave(function(){
                    $(this).removeClass("hover");
                }).click(function(){
                    $(".pageSection .item").removeClass("select");
                    var page = $(this).text();
                    $(".pageSection").attr("page", page);
                    $(this).addClass("select");
                    loadArticle($(".pageSection").attr("addr"), 
                            $(".pageSection").attr("rows"), $(".pageSection").attr("page"));
                    window.scrollTo(0,0);
                });
                loadArticle($(".pageSection").attr("addr"), 
                    $(".pageSection").attr("rows"), $(".pageSection").attr("page"));
            }
        }
    }
});
function loadArticle(addr, rows, page){
    var pagedata = {};
    pagedata.rows = rows;
    pagedata.page = page;
    $.ajax({
        url:addr,
        type:"post",
        data:pagedata,
        success:function(data){
            $(".maincontainer .left .articles").html("");
            for(var i in data){
                var content = '<div class="contentSection article">';
                content += '<div class="articleTitle" addr="/articles/article/' + data[i].id + '">' + data[i].name + '</div>'
                content += '<div class="articleContent">';
                content += data[i].summary;
                content += '</div>';
                content += '<div class="articleInfo">';
                content += '<span>分类：' + data[i].category.name + '</span>';
                content += '<span>作者：' + data[i].author.name + '</span>';
                content += '<span>时间：' + data[i].createTime + '</span>';
                content += '</div>';
                content += '</div>';
                $(".maincontainer .left .articles").append(content);
            }
            $(".articleTitle").click(function(){
                var addr = $(this).attr("addr");
                window.location = addr;
            });
        }
    });
}

在点击分页标签后就会通过ajax来从后台获取当前页的数据，然后加载到界面上。截图如下：

这种方法比较笨，是反复通过ajax回调完成的，虽然没什么问题，但是在设计上是叫做Calback Hell，可以通过promise的方式来重写，但因为这只是我的博客的模板，前台界面后面会重新设计，所以这些工作就安排到以后了。今天的代码下载地址是：https://pan.baidu.com/s/1T8eDeAe8iCxK8uqOOt5YHA，密码：acmt