-7
rated 0 times
[
0]
[
7]
/ answers: 1 / hits: 32035
/ 8 Years ago, wed, february 24, 2016, 12:00:00
I have code like this :
var demoList = new Vue({
el: '#demoList',
data: {
items: [{
id: 1,
name: Tom
}, {
id: 2,
name: Kate
}, {
id: 3,
name: Jack
}, {
id: 4,
name: Jill
}, {
id: 5,
name: aa
}, {
id: 6,
name: bb
}, {
id: 7,
name: cc
}, {
id: 8,
name: dd
}, {
id: 1,
name: Tom
}, {
id: 2,
name: Kate
}, {
id: 3,
name: Jack
}, {
id: 4,
name: Jill
}, {
id: 5,
name: aa
}, {
id: 6,
name: bb
}, {
id: 7,
name: cc
}, {
id: 8,
name: dd
}, ],
loading: false,
order: 1,
searchText: null,
ccn: null,
currentPage: 0,
itemsPerPage: 2,
resultCount: 0
},
computed: {
totalPages: function() {
console.log(Math.ceil(this.resultCount / this.itemsPerPage) + totalPages);
return Math.ceil(this.resultCount / this.itemsPerPage);
}
},
methods: {
setPage: function(pageNumber) {
this.currentPage = pageNumber;
console.log(pageNumber);
}
},
filters: {
paginate: function(list) {
this.resultCount = this.items.length;
console.log(this.resultCount + Result count);
console.log(this.currentPage + current page);
console.log(this.itemsPerPage + items per page);
console.log(this.totalPages + Total pages 2);
if (this.currentPage >= this.totalPages) {
this.currentPage = Math.max(0, this.totalPages - 1);
}
var index = this.currentPage * this.itemsPerPage;
console.log(index + index);
console.log(this.items.slice(index, index + this.itemsPerPage));
return this.items.slice(index, index + this.itemsPerPage);
}
}
});a {
color: #999;
}
.current {
color: red;
}
ul {
padding: 0;
list-style-type: none;
}
li {
display: inline;
margin: 5px 5px;
}<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js></script>
<div id=demoList>
<div class=containerTable>
<table class=table>
<thead>
<tr class=header>
<th>
<div><a @click=sortvia('provider_name')>Provider</a>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-for=item in items | paginate>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
<ul>
<li v-for=pageNumber in totalPages>
<a href=# @click=setPage(pageNumber)>{{ pageNumber+1 }}</a>
</li>
</ul>
</div>Im stuck trying to create a pager with vuejs, so I was wonder if anyone can appoint an example of how to make a pager like this if is possible 1-2-3-4-5 ... 55 ??, thanks again for any help.
More From » jquery
