tabla rimorsoft paginar bootstrap javascript jquery laravel-4 pagination vue.js

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.

https://jsfiddle.net/c1ghkw2p/

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