pagination logic almost complete - active and inactive elements next - page gap not working
This commit is contained in:
parent
77b0d6058e
commit
64e8ab95be
2 changed files with 47 additions and 40 deletions
|
@ -17,7 +17,7 @@
|
|||
pipelines: [],
|
||||
currentPage: '',
|
||||
intervalId: '',
|
||||
pageNum: 1,
|
||||
pagenum: 1,
|
||||
};
|
||||
},
|
||||
props: [
|
||||
|
@ -27,19 +27,19 @@
|
|||
],
|
||||
created() {
|
||||
const url = window.location.toString();
|
||||
if (~url.indexOf('?')) this.pageNum = url.split('?')[1].split('=')[1];
|
||||
this.store.fetchDataLoop.call(this, Vue, this.pageNum);
|
||||
if (~url.indexOf('?')) this.pagenum = url.split('?')[1].split('=')[1];
|
||||
this.store.fetchDataLoop.call(this, Vue, this.pagenum);
|
||||
},
|
||||
methods: {
|
||||
shortsha(pipeline) {
|
||||
return pipeline.sha.slice(0, 8);
|
||||
},
|
||||
changepage(event) {
|
||||
this.pageNum = +event.target.innerText;
|
||||
this.pagenum = +event.target.innerText;
|
||||
// use p instead of page to avoid rails tyring to make an actual request
|
||||
window.history.pushState({}, null, `?p=${this.pageNum}`);
|
||||
window.history.pushState({}, null, `?p=${this.pagenum}`);
|
||||
clearInterval(this.intervalId);
|
||||
this.store.fetchDataLoop.call(this, Vue, this.pageNum);
|
||||
this.store.fetchDataLoop.call(this, Vue, this.pagenum);
|
||||
},
|
||||
pipelineurl(id) {
|
||||
return `pipelines/${id}`;
|
||||
|
@ -77,6 +77,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<vue-gl-pagination
|
||||
:pagenum='pagenum'
|
||||
:changepage='changepage'
|
||||
:pages='pipelines.length'
|
||||
:count='count'
|
||||
|
|
|
@ -3,55 +3,61 @@
|
|||
|
||||
((gl) => {
|
||||
gl.VueGlPagination = Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
last: Math.ceil(+this.count / 5),
|
||||
};
|
||||
},
|
||||
props: [
|
||||
'changepage',
|
||||
'pages',
|
||||
'count',
|
||||
'pagenum',
|
||||
],
|
||||
methods: {
|
||||
pagenumberstatus(n) {
|
||||
if (n - 1 === +this.pagenum) return 'page active';
|
||||
return '';
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
lastpage() {
|
||||
const lastPage = Math.ceil(+this.count / 5);
|
||||
return `pipelines?page=${lastPage}`;
|
||||
return `pipelines?p=${this.last}`;
|
||||
},
|
||||
upcount() {
|
||||
return +this.last + 1;
|
||||
},
|
||||
prev() {
|
||||
if (this.pagenum === 1) return 1;
|
||||
return this.pagenum - 1;
|
||||
},
|
||||
next() {
|
||||
if (this.pagenum === this.last) return `pipelines?p=${this.pagenum}`;
|
||||
return `pipelines?p=${this.pagenum + 1}`;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<div class="gl-pagination">
|
||||
<ul class="pagination clearfix">
|
||||
<li class="prev disabled">
|
||||
<ul
|
||||
class="pagination clearfix"
|
||||
v-for='n in upcount'
|
||||
>
|
||||
<li class="prev disabled" v-if='n === 1'>
|
||||
<span>Prev</span>
|
||||
</li>
|
||||
<li class="page active">
|
||||
<a @click='changepage($event)'>1</a>
|
||||
<li :class='pagenumberstatus(n)' v-else>
|
||||
<a @click='changepage($event)'>{{(n - 1)}}</a>
|
||||
</li>
|
||||
<li class="page">
|
||||
<a
|
||||
rel="next"
|
||||
@click='changepage($event)'
|
||||
>
|
||||
2
|
||||
</a>
|
||||
<!--
|
||||
still working on this bit
|
||||
<li class="page" v-if='n === upcount - 1'>
|
||||
<span class="page gap">…</span>
|
||||
</li>
|
||||
-->
|
||||
<li class="next" v-if='n === upcount'>
|
||||
<a rel="next" :href='next'>Next</a>
|
||||
</li>
|
||||
<li class="page">
|
||||
<a @click='changepage($event)'>3</a>
|
||||
</li>
|
||||
<li class="page">
|
||||
<a @click='changepage($event)'>4</a>
|
||||
</li>
|
||||
<li class="page">
|
||||
<a @click='changepage($event)'>5</a>
|
||||
</li>
|
||||
<li class="page">
|
||||
<span class="page gap">…</span>
|
||||
</li>
|
||||
<li class="next">
|
||||
<a
|
||||
rel="next"
|
||||
href="pipelines?page=2"
|
||||
>
|
||||
Next
|
||||
</a>
|
||||
</li>
|
||||
<li class="last">
|
||||
<li class="last" v-if='n === upcount'>
|
||||
<a :href='lastpage'>Last »</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
Loading…
Reference in a new issue