Como mejorar un datatable

¡Hola! ¿Que tal te va? El día de hoy te comparto un pequeño articulo donde te muestro un par de tips y mejoras que puedes aplicar en un datatable para que tus proyectos sean más profesionales.

Antes de comenzar ¿Alguna vez has usado la librería DataTable? Si no lo has hecho a continuación te platico un poco sobre esta librería y para que la puedes utilizar.

¿Que es DataTable?

DataTable es una librería jQuery para la construcción de tablas profesionales, incluye varias características como paginación, filtros, búsqueda, ordenamiento, es responsiva, entre muchas más.

Su implementación es realmente super sencilla, solo importas un style, la librería jquery y la librería DataTable.

En este articulo te muestro a detalle cómo hacer una tabla html con DataTable.

¿Qué funciones extras puedo incluir en DataTable?

Agregar un botón

Por defecto con una implementación básica de DataTable se puede agregar una serie de botones que permiten exportar el contenido de la tabla a formatos Excel, CSV, PDF, Imprimir, etc, este tipo de botones los agregamos mediante el siguiente código dentro del bloque donde inicializamos nuestra tabla:

buttons: [
                {extend: 'excelHtml5'},
                {extend: 'csvHtml5'},
                {extend: 'pdfHtml5'}
]

En este articulo te muestro como agregar un botón extra personalizado y que haga una función específica, para hacer esto únicamente agregas el siguiente código dentro del bloque buttons:

buttons: [
    {
     text: 'Agregar evento',
     action: function (e, dt, node, config ){
     miFuncionPersonalizada();
     },
     className: 'btn_personalizado'
     }
]

Donde la propiedad text te permite definir el nombre que mostrará el botón, en el action definimos la función que se llamará cuando demos clic sobre el botón, en esta función incluyes las líneas de código para hacer esa función extra que necesitas en el datatable.
Si deseas darle un estilo personalizado a tu botón, mediante className asignas un nombre de clase, de esta manera puedes aplicar tu estilo desde el style de tu proyecto.

Ocultar columnas

Usando DataTable tenemos la opción de ocultar una o más columnas con el objetivo de poder usar sus valores para operaciones, filtros, búsquedas, etc, pero que el usuario no pueda visualizar este contenido.

Dentro de columnDefs incluimos el parámetro targets donde definiremos el número de columna a ocultar y en visible ponemos el valor false.

"columnDefs": [
      {
          "targets": [ 3 ],
          "visible": false
      }
]

¿Sabías que podías hacer esto con DataTable? ¿Esta genial no? Cuentame si sabes otro tip que podamos implementar con esta librería, en lo personal es una de mis herramientas favoritas.
No olvides compartir esta entrada en tus redes sociales para que todos nuestros colegas estén al tanto de este tema.
Te envío un abrazo y espero muy pronto tener una entrada nueva. 🙂