En el siguiente tutorial podréis crear un sencillo paginador con VueJS 2. Una herramienda formidable para cualquier desarrollador de Frontend. Un sucesor natural de Angular, sin inventar un nuevo lenguaje y una curva de aprendizaje para toda la familia.
Aqui se utiliza todo su potencial para, en una manera rápida y clara, mostrar los usuarios de una supuesta base de datos. E incluso incorpora un sistema que oculta o muestra los controles dependiendo de si estas al principio o al final de los resultados. Todo configurable modificando las variables.
Si se queda corto puedes visitar mi paginador con filtros.
Demo
- {{ user.name }} - {{ user.email }}
Pasos
HTML
Crea un archivo nuevo y llámalo, por ejemplo, usuarios.html . Introduce el siguiente fragmento.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<section id="app">
<!-- Resultados -->
<ul class="list-group">
<li class="list-group-item text-center" v-for="(user, index) in users" v-show="(pag - 1) * NUM_RESULTS <= index && pag * NUM_RESULTS > index">
{{ user.name }} - {{ user.email }}
</li>
</ul>
<!-- Controles -->
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination text-center">
<li>
<a href="#" aria-label="Previous" v-show="pag != 1" @click.prevent="pag -= 1">
<span aria-hidden="true">Anterior</span>
</a>
</li>
<li>
<a href="#" aria-label="Next" v-show="pag * NUM_RESULTS / users.length < 1" @click.prevent="pag += 1">
<span aria-hidden="true">Siguiente</span>
</a>
</li>
</ul>
</nav>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<script src="codigo.js"></script>
</body>
</html>
Se utiliza Bootstrap, aunque se puede sustituir con el HTML que se quiera en el futuro. Lo importante es mantener el v-for encargado de renderizar los usuarios y los @click encargados de los eventos.
Javascript
Creamos un fichero llamado codigo.js con este contenido.
new Vue({
el: '#app',
data: {
NUM_RESULTS: 3, // Numero de resultados por página
pag: 1, // Página inicial
// JSON a mostrar
users: [{
"id": 1,
"name": "Leanne Graham",
"email": "Sincere@april.biz"
},
{
"id": 2,
"name": "Ervin Howell",
"email": "Shanna@melissa.tv"
},
{
"id": 3,
"name": "Clementine Bauch",
"email": "Nathan@yesenia.net"
},
{
"id": 4,
"name": "Patricia Lebsack",
"email": "Julianne.OConner@kory.org"
},
{
"id": 5,
"name": "Chelsey Dietrich",
"email": "Lucio_Hettinger@annie.ca"
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"email": "Karley_Dach@jasper.info"
},
{
"id": 7,
"name": "Kurtis Weissnat",
"email": "Telly.Hoeger@billy.biz"
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"email": "Sherwood@rosamond.me"
},
{
"id": 9,
"name": "Glenna Reichert",
"email": "Chaim_McDermott@dana.io"
},
{
"id": 10,
"name": "Clementina DuBuque",
"email": "Rey.Padberg@karina.biz"
}
]
}
});
El JSON que contiene users es inventado. Podrías introducir la información que quisieras.
Y con esto ya funcionará.
Código completo.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<section id="app">
<!-- Resultados -->
<ul class="list-group">
<li class="list-group-item text-center" v-for="(user, index) in users" v-show="(pag - 1) * NUM_RESULTS <= index && pag * NUM_RESULTS > index">
{{ user.name }} - {{ user.email }}
</li>
</ul>
<!-- Controles -->
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination text-center">
<li>
<a href="#" aria-label="Previous" v-show="pag != 1" @click.prevent="pag -= 1">
<span aria-hidden="true">Anterior</span>
</a>
</li>
<li>
<a href="#" aria-label="Next" v-show="pag * NUM_RESULTS / users.length < 1" @click.prevent="pag += 1">
<span aria-hidden="true">Siguiente</span>
</a>
</li>
</ul>
</nav>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
NUM_RESULTS: 3, // Numero de resultados por página
pag: 1, // Página inicial
// JSON a mostrar
users: [{
"id": 1,
"name": "Leanne Graham",
"email": "Sincere@april.biz"
},
{
"id": 2,
"name": "Ervin Howell",
"email": "Shanna@melissa.tv"
},
{
"id": 3,
"name": "Clementine Bauch",
"email": "Nathan@yesenia.net"
},
{
"id": 4,
"name": "Patricia Lebsack",
"email": "Julianne.OConner@kory.org"
},
{
"id": 5,
"name": "Chelsey Dietrich",
"email": "Lucio_Hettinger@annie.ca"
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"email": "Karley_Dach@jasper.info"
},
{
"id": 7,
"name": "Kurtis Weissnat",
"email": "Telly.Hoeger@billy.biz"
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"email": "Sherwood@rosamond.me"
},
{
"id": 9,
"name": "Glenna Reichert",
"email": "Chaim_McDermott@dana.io"
},
{
"id": 10,
"name": "Clementina DuBuque",
"email": "Rey.Padberg@karina.biz"
}
]
}
});
</script>
</body>
</html>
{{ comments.length }} comentarios