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.

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
- 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>
- 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();
.ajax.reload(); tabla
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
No hay comentarios:
Publicar un comentario