Angular 4 y Datatables
Angular 4 y Datatables


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.

Angular 4 y Datatables

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.


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.

Cursos de Angular

Si estás interesado en Angular, visita Cursosdesarrolloweb, tenemos varios cursos sobre Angular que seguro te interesan.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.


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.


Si deseas cambiar el tema simplemente puedes utilizar el que más te guste de esta página.

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.


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]).

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, espero que te resulte útil.