原生 JavaScript 分页代码

JS 分页在已经有很多成熟的框架了,但许多小项目还是没必要 “杀鸡用牛刀” 的。在此介绍一种自己用的 JS 分页代码。
先放效果图:

这个分页的思路是,首先要显示当前页,然后以当前页为中心,前后各打印 3 页,最后首尾打印 “上一页” 与 “首页”,“最后一页” 和 “下一页”。中间页数衔接不上的打印 “…”。

样式只是使用 a 标签实现,具体代码如下:

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
/**
* @param {Object} page 当前页码
* @param {Object} type 文章类型
* @param {Object} total 总页码数
* @param {Object} url 头部网址
*/
function showPage(page,type,total,url) {
page=parseInt(page);
total=parseInt(total);
var str = '<span class="current">' + page + '</span>';

for (var i = 1; i <= 3; i++) {
if (page - i > 1) {
str = '<a href='+url+'?type='+type+'&page='+(page - i) +'>' + (page - i) + '</a> ' + str;
}
if (page + i < total) {
str = str + ' ' +'<a href='+url+'?type='+type+'&page='+(page + i) +'>'+ (page + i)+ '</a> ';
}
}

if (page - 4 > 1) {
str = '<a href="javascript:void(0)">...</a> ' + str;
}

if (page > 1) {
str = '<a href='+url+'?type='+type+'&page='+(page - 1) +'>' +'<上一页 '+'</a> ' +
'<a href='+url+'?type='+type+'&page='+1 +'>'+ 1 + '</a> ' + str;
}

if (page + 4 < total) {
str = str + '<a href="javascript:void(0)">...</a> ';
}

if (page < total) {
str = str + ' ' + '<a href='+url+'?type='+type+'&page='+(total) +'>' +total+ '</a> '+
'<a href='+url+'?type='+type+'&page='+(page + 1) +'>'+' 下一页 >'+ '</a> ';
}

return str;
}