Cómo integrar DataTables: el mejor grid interactivo para tu sistema web

En muchos sistemas web, especialmente aquellos orientados a la administración, es común necesitar un grid interactivo para gestionar datos de forma eficiente: listar, editar o eliminar (CRUD). Una de las bibliotecas más populares para esto es DataTables, una herramienta potente y flexible para crear tablas dinámicas con ordenamiento, búsqueda, paginación y más.

En este artículo te muestro cómo integrar DataTables en tu proyecto web (o incluso adaptarlo para móviles), con ejemplos prácticos y recomendaciones personales.

Grid DataTables

Antes solía utilizar jqGrid, una buena alternativa, pero con menos soporte para dispositivos móviles. Por eso, decidí explorar a fondo DataTables y compartir mi experiencia contigo.

Ahora sí, ¡empecemos con la instalación y configuración paso a paso!

1. Instalación

1. Configuracion simple por cdn o npm

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

2. instalación con NPM

npm install datatables.net

import DataTable from 'datatables.net';
new DataTable('#miTabla');

2. Inicialización Básica

$(document).ready(function() {
    $('#miTabla').DataTable();
});

Esto transforma una tabla HTML en una tabla interactiva con:

• ✅ Búsqueda
• ✅ Paginación
• ✅ Ordenamiento de columnas

3. Personalización de Opciones

📌 Desactivar paginación, búsqueda y ordenamiento

$('#miTabla').DataTable({
    paging: false,      // Oculta paginación
    searching: false,   // Oculta barra de búsqueda
    ordering: false     // Desactiva ordenamiento
});

📌 Personalizar lenguaje (Español)

$('#miTabla').DataTable({
    language: {
        url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/Spanish.json"
    }
});

4. Cargar Datos Dinámicos con AJAX

DataTables puede obtener datos desde una API en JSON.

$('#miTabla').DataTable({
    ajax: "https://api.example.com/usuarios",
    columns: [
        { data: "id" },
        { data: "nombre" },
        { data: "email" }
    ]
});

• ✅ Ideal para aplicaciones con backend y bases de datos.
• ✅ Evita renderizar muchas filas en HTML.

5. Formatear Datos en Columnas (render)

Para personalizar la forma en que se muestran los datos.

Ejemplo: Mostrar emails con un enlace

$('#miTabla').DataTable({
    columns: [
        { data: "nombre" },
        { 
            data: "email",
            render: function(data, type, row) {
                return `<a href="mailto:${data}">${data}</a>`;
            }
        }
    ]
});

6. Agregar Botones de Exportación

Puedes exportar datos a Excel, PDF, CSV, etc., con Buttons Extension.

<!-- Agregar CSS y JS de Buttons -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

$('#miTabla').DataTable({
    dom: 'Bfrtip', // B = Buttons, f = filtro, r = información, t = tabla, i = info, p = paginación
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ]
});

7. Agregar Columnas con Botones de Acción

Si necesitas agregar botones de edición o eliminación en una columna:

$('#miTabla').DataTable({
    columnDefs: [{
        targets: -1, // Última columna
        data: null,
        defaultContent: `
            <button class="btn-editar btn btn-sm btn-primary">✏️ Editar</button>
            <button class="btn-eliminar btn btn-sm btn-danger">🗑️ Eliminar</button>
        `
    }]
});

// Delegación de eventos para capturar clicks
$('#miTabla tbody').on('click', '.btn-editar', function () {
    let data = $('#miTabla').DataTable().row($(this).parents('tr')).data();
    alert(`Editar usuario: ${data.nombre}`);
});

8. Recargar Datos sin Refrescar la Página

Si necesitas actualizar la tabla sin recargar la web:

var tabla = $('#miTabla').DataTable();
tabla.ajax.reload();

Ideal para cuando los datos cambian con frecuencia.

🚀 Conclusión

Con estos conocimientos puedes usar DataTables como un PRO:

• ✅ Inicialización y configuración
  
• ✅ Personalización de lenguaje y diseño
  
• ✅ Cargar datos dinámicos desde una API
  
• ✅ Agregar botones personalizados y exportación
  
• ✅ Manejo de eventos y recarga de datos