摘要：用js实现翻页效果，首页、末页、上一页、下一页、跳转到具体页，数据采用豆瓣图书api，主要侧重功能，当然也有其不足之处，望各位多多指教。

在翻页效果中，翻页和页码生成都是动态的，所以封装一个翻页函数GoPage(p)，用来调用api、数据传输、拼接每页数据、调用页码函数、添加HTML；还需要封装一个页码函数getPageNavigate(currentPage,totalPages)，用于页码的动态生成、返回页码字符串。

其中页码生成涉及到比较多的判断，也是这个效果中比较难的地方，其中涉及到几个关键变量，当前页、总页数、页码显示个数（本案例已写死为5）、前三页、倒数第二页，下面来理一理思路：

首先初始化页码字符串为""，接下来的所有逻辑即在总页数>0下完成。

1.首先是首页、末页，当前页==1，首页点击不做任何操作，否则翻页到第一页GoPage(1)；如果当前页 ==总页数，不做任何操作，否则翻页到最后一页GoPage(totalPages)。
2.然后是上一页、下一页，当前页>1，点击回到当前页减一页GoPage(currentpage-1)，否则点击不做任何操作；如果当前页<总页数，点击回到当前页加一页GoPage(currentpage+1)，否则点击不做任何操作。
3.跳页，点击获取input输入的值调用GoPage(val)到指定页。
4.中间页码，因为页码显示5个，所以这里的子逻辑前提为总页数>5；当前页数为1-3时，遍历显示前五个页码生成页码字符串，在后面追加字符串...；当前页在4到倒数第二页时，前面字符串追加...，遍历当前页-2到当前页+2页码生成页码字符串，并在后面面字符串追加...；当前页大于倒数第二页时，在前面追加字符串...，遍历后四页生成页码字符串。退出子逻辑，当总页数<5时，遍历还是所有页码。

好了，一大把文字下来直接贴代码：

1. HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div id="mask">
        <p id="loading">加载中。。。。</p>
    </div>
    <div>javascript实现翻页效果</div>
    <div>页数p为全局变量</div>
    <div>在正式开发环境中在执行涉及翻页数据的api操作后需要执行该翻页函数</div>
    <button id="btn">点击启动翻页</button>
    <div id="tb-content">
        
    </div>
    <div id="page-bottom">
        
    </div>
</body>

2. CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<style type="text/css">
    #mask{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 99;
        background-color: rgba(0,0,0,.4);
        display: none;
        
    }
    #loading{
        width: 140px;
        position: relative;
        top: 45%;
        left: 48%;
        color: red;             
        font-size: 20px;
    }
    .content-div{
        width: 700px;
        text-align: center;
        margin: 0 auto;
        height: 40px;
        line-height: 1.2;
    }
    #page-bottom{
        width: 780px;
        margin: 0 auto;
    }
    /*页码样式*/
    .noclick-nbe {
        border: 1px solid #BBBBBB;
        padding: 5px 10px;
        margin-right: 5px;
        font-size: 14px;
        cursor: pointer;
    }
    .currentpage {
        color: #ffffff;
        padding: 5px 10px;
        font-size: 14px;
        margin-right: 5px;
        cursor: pointer;
        background: #3e91fe;
    }
    .curra-nbe {
        border: 1px solid #BBBBBB;
        padding: 5px 10px;
        margin-right: 5px;
        font-size: 14px;
        cursor: pointer;
    }
    a {
        color: #434343;
        text-decoration: none;
    }
    .count {
        border: 1px solid #BBBBBB; 
        padding: 5px 10px;
        margin-right: 5px;
        font-size: 14px;
        color: rgb(150, 150, 150);
    }
    .pageNum {
        color: rgb(150, 150, 150);
        font-size: 14px;
    }
    #pageSure-nbe {
        border: 1px solid #BBBBBB;
        width: 25px;
        height: 25px;
        line-height: 30px;
        font-size: 14px;
        color: #000000;
        padding: 5px 10px;
        margin-left: 10px;
    }
    #txt_page {
        width: 38px;
        height: 18px;
        line-height: 20px;
        background: #f5f5f5;
        border: 1px solid #BBBBBB;
    }
    .nopage {
        border: 1px solid #BBBBBB;
        padding: 5px 10px;
        font-size: 14px;
        margin-right: 5px;
        cursor: pointer;
    }
    
</style>

3. javascript

长代码预警。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var p = 1;  

$("#btn").on("click",function(){
    GoPage(1);  
});

function GoPage(i){
    // do someting on start..
    p = parseInt(i);  //p为全局变量 全部范围初始化为1
    
    $("#mask").show(); //加载中动图
    
    var url = 'https://api.douban.com/v2/book/search?q=python&fields=id,title';
    $.ajax(url, {
        data: {
            'q': 'python',
            'count': '10',
            'start': p==1?0:p*10,
            'fields': 'id,title'
        },
        dataType: 'jsonp',
        crossDomain: true,
        success: function(json) {
            $("#mask").hide();
            var table = "";
            var pageTotal; //总页数

            if(json.books){
                pageTotal = parseInt(json.total/10);

                $.each(json.books, function(i ,item) {
                    //拼截每页字符串
                    table += '<div class="content-div"><span>'+ item.title + '</span></div>';
                });
                
            }else{
                table = "";
            }
            
            $("#tb-content").html(table);
            
            //页码函数
            var page = getPageNavigate(p, pageTotal);
            $("#page-bottom").html(page);
        }
    });
}

//页码函数
function getPageNavigate(currentPage, totalPages){

    var output = "";
    var max = 5; //显示个数
    if(totalPages > 0){ //至少有数据
        //首页和上一页
        if(currentPage == 1){ 
            output += "<a href='javascript:void(0)' class='noclick-nbe'>首页</a>";
        }else{
            output += "<a href='javascript:void(0)' class='curra-nbe' onclick='GoPage(1)'>首页</a>";
        }
        
        if(currentPage > 1){
            output += "<a href='javacript:void(0)' class='curra-nbe' onclick='GoPage(" + (currentPage - 1) + ")'>上一页</a>";
        }else{
            output += "<a href='javascript:void(0)' class='noclick-nbe'>上一页</a>";
        }
        
        //中间页码
        if(totalPages > 5){ //超过5页
            if(currentPage < 4){  // 1..3 加当前页和其他页码
                for(var i = 1; i <= 5; i++){  //显示页码1..5后面加...
                    if(currentPage == i){  //当前页 加选中样式
                        output += "<a href='javascript:void(0)' class='curra-nbe currentpage'>" + i.toString() + "</a>";
                    }else{ //其他页
                        output += "<a href='javascript:void(0)' class='nopage' onclick='GoPage(" + i + ")'>" + i.toString() + "</a>";
                    }
                }
                output += "<a href='javascr ipt: void(0)' class='num'>...</a>";
            }else if(currentPage > 3 && currentPage <= totalPages - 2){  
            //当前页>3||<倒数第二页 页码前面后面加...
                if(currentPage > 3){
                    output += "<a href='javascript:void(0)' class='num'>...</a>";
                }
                for(var i = currentPage - 2; i <= currentPage + 2; i++){
                    if(currentPage == i){  //当前页，加选中样式
                        output += "<a href='javascript:void(0)' class='curra-nbe currentpage'>" + i.toString() + "</a>";
                    }else{
                        output += "<a href='javascript:void(0)' class='nopage' onclick='GoPage(" + i + ")'>" + i.toString() + "</a>";
                    }
                }
                if(currentPage < totalPages - 2){
                    output += "<a href='javascript:void(0)' class=''>...</a>";
                }
            }else if(currentPage > totalPages - 2){
                //当前页>倒数第二页 页码前面加...
                if(currentPage > 3){
                    output += "<a href='javascript:void(0)' class=''>...</a>";
                }
                for(var i = totalPages - 4; i <= totalPages; i++){
                    if(currentPage == i){ // 当前页 加选中样式
                        output += "<a href='javascript:void(0)' class='curra-nbe currentpage'>" + i.toString() + "</a>";
                    }else{
                        output += "<a href='javascript:void(0)' class='nopage' onclick='GoPage(" + i + ")'>" + i.toString() + "</a>";
                    }
                }
            }

        }else{ // 不超过5页
            for(var i = 1; i <= totalPages; i++){
                if(currentPage == i){  //当前页，加选中样式
                    output += "<a href='javascript:void(0)' class='curra-nbe currentpage'>" + i.toString() + "</a>";
                }else{
                    output += "<a href='javascript:void(0)' class='nopage' onclick='GoPage(" + i + ")'>" + i.toString() + "</a>";
                }
            }
        }

        //下一页和末页
        if(currentPage < totalPages){
            output += "<a href='javascript:void(0)' class='curra-nbe' onclick='GoPage(" + (currentPage + 1).toString() + ")'>下一页</a>";
        }else{
            output += "<a href='javascript:void(0)' class='noclick-nbe'>下一页</a> ";
        }
        
        if(currentPage == totalPages){
            output += "<a href='javascript:void(0)' class='noclick-nbe'>末页</a>";
        }else{
            output += "<a href='javascript:void(0)' class='curra-nbe' onclick='GoPage(" + totalPages + ")'>末页</a>";
        }

        //拼接跳页
        output += "<span class='count'>共 " + totalPages + " 页</span><span class='pageNum'>  到第 <input type='text' name='pageInp' id='txt_page' maxlength='3' class='pgi-nbe'> 页</span><a href='javascript:void(0)' id='pageSure-nbe' onclick=\"var a=$('#txt_page').val();GoPage(a);\">确定</a>";
        
        return output;
    }
}
    
</script>

附：此代码还可以加以优化。