En esta entrada vamos a ver un ejemplo claro sobre el uso de Angular 4 y Datatables, si no conoces Datatables, es un plugin escrito en jQuery que nos permite crear tablas html muy dinámicas, con paginaciones utilizando ajax, búsquedas, ordenación y mucho más.
Para utilizar Datatables vamos a utilizar este package, el cual funciona muy bien y tiene todo lo que podamos necesitar.
Instalar Datatables en Angular 4
Ten en cuenta que para el ejemplo yo voy a estar trabajando con @angular/cli utilizando un proyecto generado con el siguiente comando.
|
1
|
ng new angular–datatables —routing
|
Para instalar Datatables vamos a ejecutar el siguiente comando desde la terminal.
|
1
|
npm i –S angular2–datatable
|
Ahora vamos a generar un nuevo componente para poder trabajar de forma separada con Datatables, para ello vamos a ejecutar el siguiente comando.
|
1
|
ng g component datatables–products
|
Abre el componente generado y añade el siguiente código.
Lo único que hacemos es definir algunas propiedades de la clase para utilizar con Datatables y hacer una petición http en el hook ngOnInit a un archivo data.json que puedes descargar desde aquí, recuerda colocarlo en el directorio assets. Con esto ya tenemos disponibles tanto los datos como las variables que necesitamos para construir un ejemplo.
Abre el archivo .html de nuestro componente y añade el siguiente código, donde simplemente mostramos la información haciendo uso de los componentes y directivas que nos ofrece el package Angular2 Datatables.
Cómo puedes ver todo está bastante claro.
- [mfData]=”data”: le decimos los datos que queremos utilizar.
- [mfRowsOnPage]=”rowsOnPage”: resultados por página.
- mfDefaultSorter: columna de Datatables con ordenación.
- mfBootstrapPaginator: componente para representar la paginación de Datatables.
- [rowsOnPageSet]=”[5,10,25]”: aparte de la paginación, nos permite decir si queremos mostrar un número distinto de resultados por página.
Añadir Bootstrap a Angular 4 y Datatables
Para conseguir un mejor aspecto para nuestras tablas, podemos añadir bootstrap directamente desde su cdn, incluso añadir un tema, para ello abre el archivo index.html de tu app y añade el siguiente código debajo del favicon.
|
<link rel=«stylesheet» href=«https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»>
<link rel=«stylesheet» href=«https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css»>
|
Añadir un buscador a Datatables
Si además queremos añadir un buscador para realizar búsquedas sobre columnas de nuestras tablas, entonces debemos ejecutar primero el siguiente comando para crear un Pipe.
|
ng g pipe pipes/data–filter
|
Ábrelo y añade el siguiente código.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import * as _ from «lodash»;
import {Pipe, PipeTransform} from «@angular/core»;
@Pipe({
name: «dataFilter»
})
export class DataFilterPipe implements PipeTransform {
transform(array: any[], query: string): any {
if (query) {
return _.filter(array, row => (row.name).toLowerCase().indexOf(query) > –1);
}
return array;
}
}
|
Para poder utilizar el Filtro que acabamos de crear vamos a modificar el código html de nuestro componente para añadir un buscador y utilizar el filtro en los datos de entrada de Datatables ([mfData]).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<div class=«col-md-12»>
<table
class=«table table-striped»
[mfData]=«data | dataFilter : filterQuery»
#mf=«mfDataTable»
[mfRowsOnPage]=«rowsOnPage»
[(mfSortBy)]=«sortBy»
[(mfSortOrder)]=«sortOrder»
>
<thead>
<tr>
<th style=«width: 20%»>
<mfDefaultSorter by=«name»>Name</mfDefaultSorter>
</th>
<th style=«width: 50%»>
<mfDefaultSorter by=«email»>Email</mfDefaultSorter>
</th>
<th style=«width: 10%»>
<mfDefaultSorter by=«age»>Age</mfDefaultSorter>
</th>
<th style=«width: 20%»>
<mfDefaultSorter by=«city»>City</mfDefaultSorter>
</th>
</tr>
<tr>
<th colspan=«5»>
Filter by name:
<input class=«form-control» [(ngModel)]=«filterQuery»/>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor=«let item of mf.data»>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td class=«text-right»>{{item.age}}</td>
<td>{{item.city | uppercase}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=«4»>
<mfBootstrapPaginator [rowsOnPageSet]=«[5,10,25]»></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
|
Eso es todo, si le echas un ojo al último trozo de código verás que simplemente hemos hecho un par de modificaciones, ahora tenemos un ejemplo con Angular 4 y Datatables utilizando paginación, ordenación y un buscador.
Te esperamos en los próximos artículos en donde hablaremos mas acerca de estos temas que hoy en día son de importancia e interés en el mundo de la tecnología.
Gracias por el artículo, les comento, mi nombre es Fernando, junto con unos compañeros de escuela estamos intentando crear una app para beneficio de nuestra comunidad, ahora bien, nuestro profesor nos ha recomendado leer la información de https://bit.ly/3s5ByiM pero sinceramente no entendemos bien por donde comenzar. ¿Podrían ayudarnos para entender un poco mejor la mejor manera de desarrollar nuestra app? ¿conocen algún sitio que explique mejor cómo cear una app pra nuestra escuela? Gracias!
Saludos ?, Fernando 🙂
Hola Fernando, somos expertos en tecnología nos gustaría poder conversar contigo para platicarte nuestra experiencia en el inicio de nuestras app moviles, te dejo mis datos: gguerrero@tecgurus.net
Buenas tardes , me podrias ayudar esta muy complicado esto como se hace y me podria explicar es para una prueba de mi entrevista gracias.
Crear una app en angular 4 que consuma un servicio a través de la siguiente url https://jsonplaceholder.typicode.com/comments, el servicio devolverá una lista en formato JSON similar al siguiente
[
{
«postId»: 1,
«id»: 1,
«name»: «id labore ex et quam laborum»,
«email»: «Eliseo@gardner.biz»,
«body»: «laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium»
},
{
«postId»: 1,
«id»: 2,
«name»: «quo vero reiciendis velit similique earum»,
«email»: «Jayne_Kuhic@sydney.com»,
«body»: «est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et»
}
]
Dicho json debe ser recorrido y alcenado en un arreglo y mostrado en una tabla la cual debe tener filtrado por id y paginacion.
Adicionalmente la tabla debe poseer un boton crear el cual al ser clickeado debe mostrar un formulario con los siguientes campos:
postId solo numeros
id solo numeros obligatorio
name alfanumérico obligatorio
email validar correo obligatorio
body alfanumérico obligatorio
Una vez completado todos los campos obligatoriamente se debe agregar al arreglo y mostrarse en la tabla.