Skip to content
This repository was archived by the owner on Oct 24, 2018. It is now read-only.

Commit c7e02fa

Browse files
alexankitalexankit
committed
More improvements in pagination
1 parent 0c01591 commit c7e02fa

File tree

3 files changed

+55
-63
lines changed

3 files changed

+55
-63
lines changed

‎src/components/Pagination.vue

+39-54
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,26 @@
22
<nav v-if="shouldShowPagination">
33
<ul class="pagination justify-content-center">
44
<li :class="{ disabled: pagination.currentPage === 1 }">
5-
<a
6-
:class="{ disabled: pagination.currentPage === 1 }"
7-
@click="pageClicked( pagination.currentPage - 1 )">
5+
<a :class="{ disabled: pagination.currentPage === 1 }"
6+
@click="pageClicked( pagination.currentPage - 1 )">
87
<i class="left chevron icon">«</i>
98
</a>
109
</li>
10+
<li v-if="hasFirst" class="page-item" :class="{ active: isActive(1) }">
11+
<a class="page-link" @click="pageClicked(1)">1</a>
12+
</li>
13+
<li v-if="hasFirstEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
1114
<li class="page-item" :class="{ active: isActive(page), disabled: page === '...' }" v-for="page in pages">
1215
<a class="page-link" @click="pageClicked(page)">{{ page }}</a>
1316
</li>
17+
<li v-if="hasLastEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
18+
<li v-if="hasLast" class="page-item"
19+
:class="{ active: isActive(this.pagination.totalPages) }">
20+
<a class="page-link" @click="pageClicked(pagination.totalPages)">{{pagination.totalPages}}</a>
21+
</li>
1422
<li>
15-
<a
16-
:class="{ disabled: pagination.currentPage === this.pagination.totalPages }"
17-
@click="pageClicked( pagination.currentPage + 1 )">
23+
<a :class="{ disabled: pagination.currentPage === pagination.totalPages }"
24+
@click="pageClicked( pagination.currentPage + 1 )">
1825
<i class="right chevron icon">»</i>
1926
</a>
2027
</li>
@@ -39,16 +46,22 @@
3946
: this.pageLinks();
4047
},
4148
42-
shouldShowPagination() {
43-
if (this.pagination.totalPages === undefined) {
44-
return false;
45-
}
49+
hasFirst() {
50+
return this.pagination.currentPage >= 4 || this.pagination.totalPages < 10
51+
},
4652
47-
if (this.pagination.count === 0) {
48-
return false;
49-
}
53+
hasLast() {
54+
return this.pagination.currentPage <= this.pagination.totalPages - 3 || this.pagination.totalPages < 10
55+
},
5056
51-
return this.pagination.totalPages > 1;
57+
hasFirstEllipsis() {
58+
return this.pagination.currentPage >= 4 && this.pagination.totalPages >= 10
59+
},
60+
61+
hasLastEllipsis() {
62+
return (this.pagination.currentPage < this.pagination.totalPages - 2 &&
63+
this.pagination.currentPage <= this.pagination.totalPages - 3) &&
64+
this.pagination.totalPages >= 10
5265
},
5366
5467
shouldShowPagination() {
@@ -62,6 +75,7 @@
6275
6376
return this.pagination.totalPages > 1;
6477
},
78+
6579
},
6680
6781
methods: {
@@ -84,46 +98,17 @@
8498
8599
pageLinks() {
86100
const pages = [];
87-
let preDots = false;
88-
let postDots = false;
89-
90-
for (let i = 1; i <= this.pagination.totalPages; i++) {
91-
92-
if (this.pagination.totalPages <= 10) {
93-
pages.push(i);
94-
} else {
95-
if (i === 1) {
96-
pages.push(i);
97-
continue;
98-
}
99-
100-
if (i === this.pagination.totalPages) {
101-
pages.push(i);
102-
continue;
103-
}
104-
105-
if (
106-
// link is within 4 of current
107-
(i > this.pagination.currentPage - 4 && i < this.pagination.currentPage + 4) ||
108-
// current and link less than 4
109-
(i < 4 && this.pagination.currentPage < 4) ||
110-
// current and link within 4 of end
111-
(i > this.pagination.totalPages - 4 && this.pagination.currentPage > this.pagination.totalPages - 4)) {
112-
pages.push(i);
113-
continue;
114-
}
115-
116-
if (i < this.pagination.currentPage && !preDots) {
117-
pages.push('...');
118-
preDots = true;
119-
continue;
120-
}
121-
122-
if (i > this.pagination.currentPage && !postDots) {
123-
pages.push('...');
124-
postDots = true;
125-
}
126-
}
101+
102+
let left = 2;
103+
let right = this.pagination.totalPages - 1;
104+
105+
if (this.pagination.totalPages >= 10) {
106+
left = Math.max(1, this.pagination.currentPage - 2);
107+
right = Math.min(this.pagination.currentPage + 2, this.pagination.totalPages);
108+
}
109+
110+
for (let i = left; i <= right; i++) {
111+
pages.push(i);
127112
}
128113
129114
return pages;

‎tests/components/__snapshots__/Pagination.test.js.snap

+10-9
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ exports[`Pagination can render large pagination 1`] = `
2020
</i>
2121
</a>
2222
</li>
23+
<!---->
24+
<!---->
2325
<li class="page-item">
2426
<a class="page-link">
2527
1
@@ -40,15 +42,10 @@ exports[`Pagination can render large pagination 1`] = `
4042
4
4143
</a>
4244
</li>
43-
<li class="page-item">
44-
<a class="page-link">
45-
5
46-
</a>
47-
</li>
48-
<li class="page-item disabled">
49-
<a class="page-link">
50-
...
51-
</a>
45+
<li>
46+
<span class="pagination-ellipsis">
47+
…
48+
</span>
5249
</li>
5350
<li class="page-item">
5451
<a class="page-link">
@@ -85,11 +82,13 @@ exports[`Pagination can set the active page 1`] = `
8582
1
8683
</a>
8784
</li>
85+
<!---->
8886
<li class="page-item active">
8987
<a class="page-link">
9088
2
9189
</a>
9290
</li>
91+
<!---->
9392
<li class="page-item">
9493
<a class="page-link">
9594
3
@@ -133,11 +132,13 @@ exports[`Pagination will render links when there is more than one page 1`] = `
133132
1
134133
</a>
135134
</li>
135+
<!---->
136136
<li class="page-item">
137137
<a class="page-link">
138138
2
139139
</a>
140140
</li>
141+
<!---->
141142
<li class="page-item">
142143
<a class="page-link">
143144
3

‎tests/components/__snapshots__/TableComponent.test.js.snap

+6
Original file line numberDiff line numberDiff line change
@@ -446,6 +446,7 @@ exports[`TableComponent can render pagination when the server responds with pagi
446446
1
447447
</a>
448448
</li>
449+
<!---->
449450
<li class="page-item active">
450451
<a class="page-link">
451452
2
@@ -456,6 +457,7 @@ exports[`TableComponent can render pagination when the server responds with pagi
456457
3
457458
</a>
458459
</li>
460+
<!---->
459461
<li class="page-item">
460462
<a class="page-link">
461463
4
@@ -648,6 +650,7 @@ exports[`TableComponent clicking a link in the pagination will rerender the tabl
648650
1
649651
</a>
650652
</li>
653+
<!---->
651654
<li class="page-item">
652655
<a class="page-link">
653656
2
@@ -658,6 +661,7 @@ exports[`TableComponent clicking a link in the pagination will rerender the tabl
658661
3
659662
</a>
660663
</li>
664+
<!---->
661665
<li class="page-item">
662666
<a class="page-link">
663667
4
@@ -740,6 +744,7 @@ exports[`TableComponent clicking a link in the pagination will rerender the tabl
740744
1
741745
</a>
742746
</li>
747+
<!---->
743748
<li class="page-item">
744749
<a class="page-link">
745750
2
@@ -750,6 +755,7 @@ exports[`TableComponent clicking a link in the pagination will rerender the tabl
750755
3
751756
</a>
752757
</li>
758+
<!---->
753759
<li class="page-item">
754760
<a class="page-link">
755761
4

0 commit comments

Comments
 (0)