原生 JavaScript 分页代码

发表于 更新于 分类于 阅读次数： 本文字数： 1.2k 阅读时长 ≈ 1 分钟

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;
 }