pagination works
This commit is contained in:
parent
3d9e368e61
commit
f4a52de3c7
2 changed files with 48 additions and 44 deletions
|
@ -1,5 +1,5 @@
|
||||||
/* global Vue, gl */
|
/* global Vue, gl */
|
||||||
/* eslint-disable no-param-reassign */
|
/* eslint-disable no-param-reassign, no-plusplus */
|
||||||
|
|
||||||
((gl) => {
|
((gl) => {
|
||||||
gl.VueGlPagination = Vue.extend({
|
gl.VueGlPagination = Vue.extend({
|
||||||
|
@ -26,61 +26,64 @@
|
||||||
computed: {
|
computed: {
|
||||||
last() { return Math.ceil(+this.count / 5); },
|
last() { return Math.ceil(+this.count / 5); },
|
||||||
getItems() {
|
getItems() {
|
||||||
|
const total = +this.count;
|
||||||
|
const page = +this.pagenum;
|
||||||
const items = [];
|
const items = [];
|
||||||
const pages = this.createSection(+this.last + 1);
|
|
||||||
pages.shift();
|
|
||||||
|
|
||||||
if (+this.pagenum > 1) items.push({ text: 'First', first: true });
|
if (page > 1) {
|
||||||
|
items.push({ title: '<< First', where: 1 });
|
||||||
|
}
|
||||||
|
|
||||||
items.push({ text: 'Prev', prev: true, class: this.prevstatus() });
|
if (page > 1) {
|
||||||
|
items.push({ title: 'Prev', where: page - 1 });
|
||||||
|
} else {
|
||||||
|
items.push({ title: 'Prev', where: page - 1, disabled: true });
|
||||||
|
}
|
||||||
|
|
||||||
pages.forEach(i => items.push({ text: i, number: true }));
|
if (page > 6) {
|
||||||
|
items.push({ title: '...', separator: true });
|
||||||
|
}
|
||||||
|
|
||||||
let nextDisabled = false;
|
const start = Math.max(page - 4, 1);
|
||||||
if (+this.pagenum === this.last) { nextDisabled = true; }
|
const end = Math.min(page + 4, total);
|
||||||
items.push({ text: 'Next', next: true, disabled: nextDisabled });
|
|
||||||
|
|
||||||
if (+this.pagenum !== this.last) items.push({ text: 'Last »', last: true });
|
for (let i = start; i <= end; i++) {
|
||||||
|
const isActive = i === page;
|
||||||
|
items.push({ title: i, active: isActive, where: i });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (total - page > 4) {
|
||||||
|
items.push({ title: '...', separator: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (page === total) {
|
||||||
|
items.push({ title: 'Next', where: page + 1, disabled: true });
|
||||||
|
} else if (total - page >= 1) {
|
||||||
|
items.push({ title: 'Next', where: page + 1 });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (total - page >= 1) {
|
||||||
|
items.push({ title: 'Last >>', where: total });
|
||||||
|
}
|
||||||
|
|
||||||
return items;
|
return items;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div class="gl-pagination">
|
<div class="gl-pagination">
|
||||||
<ul class="pagination clearfix" v-for='(item, i) in getItems'>
|
<ul class="pagination clearfix" v-for='item in getItems'>
|
||||||
<!-- if defined as the first button, render first -->
|
|
||||||
<li
|
<li
|
||||||
v-if='item.first'
|
:class='{
|
||||||
|
separator: item.separator,
|
||||||
|
active: item.active,
|
||||||
|
disabled: item.disabled
|
||||||
|
}'
|
||||||
>
|
>
|
||||||
<span @click='changepage($event)'>{{item.text}}</span>
|
<span
|
||||||
</li>
|
@click="changepage($event, item.where)"
|
||||||
<!-- if defined as the prev button, render prev -->
|
>
|
||||||
<li
|
{{item.title}}
|
||||||
:class="{disabled: prevstatus(i)}"
|
</span>
|
||||||
v-if='item.prev'
|
|
||||||
>
|
|
||||||
<span @click='changepage($event)'>{{item.text}}</span>
|
|
||||||
</li>
|
|
||||||
<!-- if defined as the next button, render next -->
|
|
||||||
<li
|
|
||||||
v-if='item.next'
|
|
||||||
:class="{disabled: item.disabled}"
|
|
||||||
>
|
|
||||||
<span @click='changepage($event)'>{{item.text}}</span>
|
|
||||||
</li>
|
|
||||||
<!-- if defined as the last button, render last -->
|
|
||||||
<li
|
|
||||||
v-if='item.last'
|
|
||||||
:class="{disabled: item.disabled}"
|
|
||||||
>
|
|
||||||
<span @click='changepage($event, last)'>{{item.text}}</span>
|
|
||||||
</li>
|
|
||||||
<!-- if defined as the number button, render number -->
|
|
||||||
<li
|
|
||||||
:class="{active: pagestatus((i))}"
|
|
||||||
v-if='item.number'
|
|
||||||
>
|
|
||||||
<span @click='changepage($event)'>{{item.text}}</span>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -37,11 +37,12 @@
|
||||||
},
|
},
|
||||||
changepage(event, last) {
|
changepage(event, last) {
|
||||||
const text = event.target.innerText;
|
const text = event.target.innerText;
|
||||||
|
if (text === '...') return;
|
||||||
if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text;
|
if (/^-?[\d.]+(?:e-?\d+)?$/.test(text)) this.pagenum = +text;
|
||||||
if (text === 'Last »') this.pagenum = last;
|
if (text === 'Last >>') this.pagenum = last;
|
||||||
if (text === 'Next') this.pagenum = +this.pagenum + 1;
|
if (text === 'Next') this.pagenum = +this.pagenum + 1;
|
||||||
if (text === 'Prev') this.pagenum = +this.pagenum - 1;
|
if (text === 'Prev') this.pagenum = +this.pagenum - 1;
|
||||||
if (text === 'First') this.pagenum = 1;
|
if (text === '<< First') this.pagenum = 1;
|
||||||
|
|
||||||
window.history.pushState({}, null, `?p=${this.pagenum}`);
|
window.history.pushState({}, null, `?p=${this.pagenum}`);
|
||||||
clearInterval(this.intervalId);
|
clearInterval(this.intervalId);
|
||||||
|
|
Loading…
Reference in a new issue