¿Te gustaría aprender Angular 4?
Tenemos los talleres que necesitas.¡Haz clic aquí!


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.

Para instalar Datatables vamos a ejecutar el siguiente comando desde la terminal.

Ahora vamos a generar un nuevo componente para poder trabajar de forma separada con Datatables, para ello vamos a ejecutar el siguiente comando.

Abre el componente generado y añade el siguiente código.

import { Component, OnInit } from ‘@angular/core’;
import {Http} from “@angular/http”;
@Component({
  selector: ‘app-datatables-products’,
  templateUrl: ‘./datatables-products.component.html’,
  styleUrls: [‘./datatables-products.component.css’]
})
export class DatatablesProductsComponent implements OnInit {
  public data: any[];
  public filterQuery = “”;
  public rowsOnPage = 5;
  public sortBy = “email”;
  public sortOrder = “asc”;
  constructor(private _http: Http) { }
  ngOnInit(): void {
    this._http.get(“assets/data.json”)
      .subscribe((data)=> {
        setTimeout(()=> {
          this.data = data.json();
        }, 2000);
      });
  }
}

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.

<table class=“table table-striped” [mfData]=“data” #mf=“mfDataTable” [mfRowsOnPage]=“rowsOnPage”>
  <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>
  </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>

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.

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.

Ábrelo y añade el siguiente código.

About Author

NGuerrero

0 0 votos
Article Rating
Suscribir
Notificar de
guest
3 Comments
La mas nueva
Más antiguo Más votada
Comentarios.
Ver todos los comentarios
Fernando
Fernando
3 Años Texto atrás

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 🙂

johana
johana
6 Años Texto atrás

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.

3
0
¿Te gusta este articulo? por favor comentax