/
pagination.js
187 lines (168 loc) · 5.37 KB
/
pagination.js
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
/**
* This function is used to generate the page list like below:
*
* ```
* [1] 2 3 4 5 6 » 20
* 1 « 6 7 [8] 9 10 » 20
* 1 « 15 16 17 18 19 [20]
* ```
*
* Note:
*
* In the returned page number array:
*
* 1. The special value `-1` represents a more page **before** the current one.
* 2. The special value `-2` represents a more page **after** the current one.
*
* This function just returns the page number array (consist of numbers). You
* can use the returned array to render the page list DOM or something you need.
* See the function demoRender(current: number, pages: number[]) below.
*
* @see {@link https://gist.github.com/john-yuan/11a05426963ed28f9bc43bb2465be3e8}
* @see {@link https://github.com/john-yuan/snippets/blob/master/pagination.js}
*
* @author John Yuan <https://github.com/john-yuan>
* @param {number} current - The current page number
* @param {number} max - The max page number
* @returns {number[]} - The page number array
*/
var pagination = function (current, max) {
'use strict';
var PREV_MORE = -1;
var NEXT_MORE = -2;
var pages = [];
var prev = current - 1;
var next = current + 1;
// if the max is less than 11, there is no `more` button needed
if (max <= 10) {
next = 1;
while (next <= max) {
pages.push(next);
next += 1;
}
} else {
// make sure we have 2 pages (if available) before the current page
if (prev >= 1) {
pages.unshift(prev);
prev -= 1;
if (prev >= 1) {
pages.unshift(prev);
prev -= 1;
if (prev === 1) {
pages.unshift(1);
} else if (prev === 2) {
pages.unshift(2);
pages.unshift(1);
} else if (prev > 2) {
pages.unshift(PREV_MORE);
pages.unshift(1);
}
}
}
pages.push(current);
// make sure that we have at least 6 pages (if available) in the first
if (pages[1] !== PREV_MORE && pages.length < 4) {
while (pages.length < 4 && next <= max) {
pages.push(next);
next += 1;
}
}
// make sure that we have 2 pages (if available) after the current page
if (next <= max) {
pages.push(next);
next += 1;
if (next <= max) {
pages.push(next);
next += 1;
if (next === max) {
pages.push(max);
} else if (next === (max - 1)) {
pages.push(max - 1);
pages.push(max);
} else if (next < (max - 1)) {
pages.push(NEXT_MORE);
pages.push(max);
}
}
}
// make sure that we have at least 6 pages (if available) in the end
if (pages[1] === PREV_MORE && pages[pages.length - 2] !== NEXT_MORE) {
prev = pages[2] - 1;
pages.shift(); // remove first page
pages.shift(); // rmeove PREV_MORE
while (pages.length < 6 && prev >= 1) {
pages.unshift(prev);
prev -= 1;
}
// add first page and PREV_MORE back
if (prev === 1) {
pages.unshift(1);
} else if (prev === 2) {
pages.unshift(2);
pages.unshift(1);
} else if (prev > 2) {
pages.unshift(PREV_MORE);
pages.unshift(1);
}
}
}
return pages;
};
//-------------------------------------TEST-------------------------------------
/**
* A demo render function to render the page list generated by pagination
*
* @param {number} current - The current page number
* @param {number[]} pages - The page number array
* @returns {string} - The rendered page list
*/
var demoRender = function (current, pages) {
var rendered = [];
pages.forEach(function (pageNo) {
if (pageNo === current) {
rendered.push('[' + pageNo + ']');
} else if (pageNo === -1) {
rendered.push('«')
} else if (pageNo === -2) {
rendered.push('»')
} else {
rendered.push(pageNo);
}
});
return rendered.join(' ');
};
/**
* This function is used to test the pagination function.
*
* @param {number} max - The max page number
*/
var testPagination = function (max) {
for (var i = 1; i <= max; i += 1) {
var pageList = demoRender(i, pagination(i, max));
console.log(pageList);
}
};
testPagination(20);
/*******************************************************************************
The output of testPagination(20):
[1] 2 3 4 5 6 » 20
1 [2] 3 4 5 6 » 20
1 2 [3] 4 5 6 » 20
1 2 3 [4] 5 6 » 20
1 2 3 4 [5] 6 7 » 20
1 « 4 5 [6] 7 8 » 20
1 « 5 6 [7] 8 9 » 20
1 « 6 7 [8] 9 10 » 20
1 « 7 8 [9] 10 11 » 20
1 « 8 9 [10] 11 12 » 20
1 « 9 10 [11] 12 13 » 20
1 « 10 11 [12] 13 14 » 20
1 « 11 12 [13] 14 15 » 20
1 « 12 13 [14] 15 16 » 20
1 « 13 14 [15] 16 17 » 20
1 « 14 15 [16] 17 18 19 20
1 « 15 16 [17] 18 19 20
1 « 15 16 17 [18] 19 20
1 « 15 16 17 18 [19] 20
1 « 15 16 17 18 19 [20]
*******************************************************************************/