原生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;
}
-------文章到此结束  感谢您的阅读-------