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

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

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

index.html

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

 1 $.ajax({
 2     url:"/home/firstcount",
 3     success:function(data){
 4         if(data && data.msg){
 5             var count = parseInt(data.msg);
 6             if(count > 0){
 7                 $(".pageSection ul").html("");
 8                 var rows = parseInt($(".pageSection").attr("rows"));
 9                 var temp = parseInt(count / rows);
10                 if(temp * rows == count){
11                     count = temp;
12                 } else {
13                     count = temp + 1;
14                 }
15                 for(var i=1; i<=count; i++){
16                     var content = '<li class="item">' + i + '</li>';
17                     $(".pageSection ul").append(content);
18                 }
19                 $(".pageSection .item:first").addClass("select");
20                 $(".pageSection .item").mouseenter(function(){
21                     $(this).addClass("hover");
22                 }).mouseleave(function(){
23                     $(this).removeClass("hover");
24                 }).click(function(){
25                     $(".pageSection .item").removeClass("select");
26                     var page = $(this).text();
27                     $(".pageSection").attr("page", page);
28                     $(this).addClass("select");
29                     loadArticle($(".pageSection").attr("addr"), 
30                             $(".pageSection").attr("rows"), $(".pageSection").attr("page"));
31                     window.scrollTo(0,0);
32                 });
33                 loadArticle($(".pageSection").attr("addr"), 
34                     $(".pageSection").attr("rows"), $(".pageSection").attr("page"));
35             }
36         }
37     }
38 });
39 function loadArticle(addr, rows, page){
40     var pagedata = {};
41     pagedata.rows = rows;
42     pagedata.page = page;
43     $.ajax({
44         url:addr,
45         type:"post",
46         data:pagedata,
47         success:function(data){
48             $(".maincontainer .left .articles").html("");
49             for(var i in data){
50                 var content = '<div class="contentSection article">';
51                 content += '<div class="articleTitle" addr="/articles/article/' + data[i].id + '">' + data[i].name + '</div>'
52                 content += '<div class="articleContent">';
53                 content += data[i].summary;
54                 content += '</div>';
55                 content += '<div class="articleInfo">';
56                 content += '<span>分类：' + data[i].category.name + '</span>';
57                 content += '<span>作者：' + data[i].author.name + '</span>';
58                 content += '<span>时间：' + data[i].createTime + '</span>';
59                 content += '</div>';
60                 content += '</div>';
61                 $(".maincontainer .left .articles").append(content);
62             }
63             $(".articleTitle").click(function(){
64                 var addr = $(this).attr("addr");
65                 window.location = addr;
66             });
67         }
68     });
69 }

index.html

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

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