javascript - rimorsoft - VueJs cómo hacer paginación con limitador y rango..?
paginar tabla html javascript (2)
Bifurqué el código de @Jeff y hice una versión de trabajo para Vue 2 debido a esta migración de filtro https://vuejs.org/v2/guide/migration.html#Filters-Outside-Text-Interpolations-removed .
El método de paginación se mueve a computado:
paginate: function() {
if (!this.users || this.users.length != this.users.length) {
return
}
this.resultCount = this.users.length
if (this.currentPage >= this.totalPages) {
this.currentPage = this.totalPages
}
var index = this.currentPage * this.itemsPerPage - this.itemsPerPage
return this.users.slice(index, index + this.itemsPerPage)
}
ADVERTENCIA: No apliqué el filtro de texto, solo la paginación primero.
Tengo un código como este:
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>
Estoy atascado tratando de crear un buscapersonas con vuejs, así que me pregunto si alguien puede designar un ejemplo de cómo hacer un buscapersonas como este si es posible "1-2-3-4-5 ... 55", gracias de nuevo por cualquier ayuda.
Echa un vistazo a este código:
https://jsfiddle.net/os7hp1cy/48/
html:
<ul>
<li v-for="pageNumber in totalPages"
v-if="Math.abs(pageNumber - currentPage) < 3 || pageNumber == totalPages - 1 || pageNumber == 0">
<a href="#" @click="setPage(pageNumber)"
:class="{current: currentPage === pageNumber, last: (pageNumber == totalPages - 1 && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 0 && Math.abs(pageNumber - currentPage) > 3)}">
{{ pageNumber+1 }}</a>
</li>
</ul>
css:
a.first::after {
content:''...''
}
a.last::before {
content:''...''
}
Básicamente, solo muestra la paginación dentro de las 2 páginas de la página actual. Luego también mostrará la página 1 y la última página, y pondrá "..." antes o después del número con CSS. Así que si estás en la página 10, mostrará:
1... 8 9 10 11 12 ...21