JavaScript分页

发表于 | 分类于 |

页面上分页很常见，分享一下我写的 JS 分页插件。希望对大家有用。

先说说插件实现分页的基本原理。

  1. 给予页面的页码显示方式，我们可以认为显示的页码是一个数组；
  2. 要得到显示的页码数组，我们需要三个参数，当前页、总页数、需要显示的页数；

话不多说，直接上代码：

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
/*
 * currentPage   总页数
 * allPages      当前页码
 * cutNum		 需要显示的页码数
 */
class Page {
	init(currentPage, allPage, cutNum) {
		this.currentPage = currentPage || 1;
		this.allPage = allPage;
		this.cutNum = cutNum || 11;
		return this.main();
	}
	main() {
		var pages = [],
			arrEnd = [],
			arrHeader = [];
		// 总页数小于分页数时
		if (this.allPage <= this.cutNum) {
			for (var i = 1; i <= this.allPage; i++) {
				var page = { page: i, active: false };
				if (this.currentPage == i) page = { page: i, active: true };
				pages.push(page);
			}
		} else {
			// 前2页的情况
			if (this.currentPage <= 2) {
				for (var i = 1; i <= this.cutNum; i++) {
					var page = { page: i, active: false };
					if (this.currentPage == i) page = { page: i, active: true };
					pages.push(page);
				}
			}
			// 后两页
			else if (this.currentPage >= this.allPage - 2) {
				for (
					var i = this.allPage - this.cutNum;
					i <= this.allPage;
					i++
				) {
					var page = { page: i, active: false };
					if (this.currentPage == i) page = { page: i, active: true };
					pages.push(page);
				}
			}
			// 其他
			else {
				for (
					var i = this.currentPage - 2;
					i <= this.currentPage + 2;
					i++
				) {
					var page = { page: i, active: false };
					if (this.currentPage == i) page = { page: i, active: true };
					pages.push(page);
				}
			}
			// 添加首页
			if (pages[0].page == 2) {
				arrHeader = [{ page: 1, active: false }];
			} else if (pages[0].page > 2) {
				arrHeader = [
					{ page: 1, active: false },
					{ page: 2, active: false },
					{ page: "···", active: false },
				];
			} else if (pages[0].page > 3) {
				arrHeader = [
					{ page: 1, active: false },
					{ page: "···", active: false },
				];
			}
			pages = arrHeader.concat(pages);
			// 添加尾页
			if (pages[pages.length - 1].page == this.allPage - 1) {
				var arrEnd = [{ page: this.allPage, active: false }];
			} else if (pages[pages.length - 1].page < this.allPage - 2) {
				var arrEnd = [
					{ page: "···", active: false },
					{ page: this.allPage - 1, active: false },
					{ page: this.allPage, active: false },
				];
			} else if (pages[pages.length - 1].page < this.allPage - 1) {
				var arrEnd = [
					{ page: "···", active: false },
					{ page: this.allPage, active: false },
				];
			}
			pages = pages.concat(arrEnd);
		}
		return pages;
	}
}

module.exports = new Page();

// 调用方法：
page.init(currentPage, allPage, cutNum);

大家可以拿去根据自己的需要修改即可。

[越努力，越幸运！]