¿Cómo crear una tabla con DataTable?

¡Hola Girl! 🙋‍♀️ Seguramente en alguno de tus proyectos web has tenido la necesidad de mostrar información dentro de una tabla, en esta entrada te enseñaremos como crear una tabla con DataTable, una librería especializada en crear tablas bonitas y profesionales.

El propósito de este artículo es mostrarte como crear una tabla usando DataTable y alimentándola mediante un archivo PHP que obtiene la información directamente de una base de datos.

Sin más preámbulo comencemos este post con todo el ⚡ power in code.

Tabla de Contenido

¿Qué es DataTable?

DataTable es una biblioteca JavaScript de software libre y de código abierto que se utiliza para mostrar datos en tablas interactivas y responsivas en aplicaciones web.

Proporciona una solución eficaz y sencilla para trabajar con grandes conjuntos de datos y permitir que los usuarios filtren, clasifiquen, paginen y busquen los datos de manera fácil y rápida.

DataTable también ofrece una variedad de opciones de personalización y configuración, lo que te permite ajustar la apariencia y funcionalidad de la tabla según tus necesidades específicas.

Si eres una desarrolladora web, con esta herramienta puedes crear tablas con paginación, clasificación y búsqueda en cuestión de minutos, lo que facilita la visualización de grandes cantidades de datos en una interfaz de usuario atractiva y fácil de usar.

¿Cómo integrar DataTable?

DataTable es una librería que utiliza varias características de jQuery, por ello necesitamos incluirlo en nuestro proyecto, recuerda que puedes usar un CDN o descargar directamente la librería y almacenarla de manera local.

Para incluir jQuery lo debes hacer dentro de tu archivo donde mostraras la tabla, regularmente siempre cargo mis scripts en la parte final de mi HTML justo antes de cerrar la etiqueta </html>.

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

Enseguida debemos incluir un par de archivos CSS y JS propios de la librería DataTable, igual que el anterior puedes usar un CDN o almacenarlos en tu proyecto localmente.

El archivo CSS lo incluyes dentro de la etiqueta head de tu HTML.

<link href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css" rel="stylesheet" />

El archivo JS en la sección de scripts en la parte final de tu HTML, pero ojo, colócalo siempre debajo de jQuery, ya que como mencionamos DataTable utiliza jQuery para funcionar.

<script src="https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.js"></script>

Hasta este punto tenemos listo todo el entorno para comenzar a trabajar en nuestra tabla con DataTable.

Para iniciar dentro del mismo archivo donde cargamos las librerías, creamos una estructura básica de tabla HTML, para este ejemplo tenemos 4 columnas, tú debes agregar las que necesites según tu proyecto.

<table id="mitabla">
        <thead>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Edad</th>
            <th>Acciones</th>        
        </thead>
</table>

Si observas definimos in id, este lo usaremos para acceder a la tabla y poder inicializarla en el siguiente paso.

Ahora sí, es momento de comenzar a hacer magia con DataTable. 😉

Dentro de tu código JS, el cual puedes tener en un archivo externo o dentro del mismo archivo que estamos trabajando, creamos una función llamada cargarMiTabla() y la llamaremos dentro del document.ready().

Si en tu proyecto la tabla tiene valores estáticos, es decir que desde la misma estructura HTML de la tabla los puedes definir, solo inicializarías tu tabla de la siguiente forma y tu trabajo terminaría, pero recuerda agregar los datos dentro de la estructura HTML que creamos arriba.

$(document).ready(function(){

   cargarMiTabla();

});

function cargarMiTabla(){

  var tabla = $('#mitabla').DataTable();

}

Si por el contrario necesitas alimentar tu tabla de manera dinámica, es decir, obtener la información de una base de datos o modificar algunos de los controles y características de DataTable, el proceso de inicialización es de la siguiente forma: no te asustes, te iremos explicando cada parte del código. 😉

    function cargarMiTabla(){

        var tabla = $('#mitabla').DataTable({

        "bProcessing": true,
        "ajax": "database/getusers.php",
        "columns": [
                { data: 'name'},
                { data: 'email' },
                { data: 'age' },
                { data: 'idUser', "aTargets": [1],
                    "render": function (data) {
                        return "<a onclick='deleteUser(" +data+ ")' class='product__tableactions'> Borrar </a>"; 
                    }
                }
            ],
        retrieve: true,
        dom: 'lfrtip',
        "pageLength": 10,
        "order": [[ 0, "asc" ]],
        "columnDefs": [
            { "width": "250px", "targets": 0 },
            { "width": "50px", "targets": 3 },
        ],
        "language": {
            "sProcessing":     "",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "searchPlaceholder": "Escribe aquí para buscar..",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "",
            "oPaginate": {
            "sFirst":    "Primero",
            "sLast":     "Último",
            "sNext":     "Siguiente",
            "sPrevious": "Anterior"
            },
            "oAria": {
            "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
            "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        }
        });
        
    }

En la siguiente tabla te explicamos los parámetros usados en el código anterior.

Parametro	Descripción
ajax	Establece la URL del archivo a donde se envia la petición, este archivo es el encargado de obtener los datos de manera dinamica y nos regresara un JSON con la información a mostrar en la tabla (más adelante te mostramos y explicamos este archivo).
columns	Este parámetro permite colocar los valores recibidos para cada columna mediante data, es importante que estas coincidan con las columnas que definimos en nuestra estructura de tabla inicial html. Si observas dentro el último data es diferente, cuando queramos incluir algún elemento HTML dentro de la tabla usamos render, para este ejemplo nosotros agregamos un enlace que llamara la función para eliminar un usuario y le pasamos el idUser que nos regresa el archivo PHP que obtiene la información, tú puedes usar cualquier otro elemento HTML según tu proyecto.
dom	Define los controles y el orden en el que aparecerán, tú los puedes acomodar a tu gusto: l (control para cambiar la cantidad de filas a mostrar) f (control para mostrar un buscador) r (control para mostrar el procesamiento) t (control para mostrar la tabla) i (muestra un resumen de los datos mostrados o filtrados en la tabla) p (control de paginación)
pageLength	Por medio de este parámetro configuramos la cantidad de registros que se mostraran al cargar la tabla.
order	Si necesitas ordenar la tabla por alguna de las columnas, lo definimos en este parámetro, el orden puede ser ascendente o descendente.
columnDefs	En este parámetro podemos definir alguna característica específica para las columnas, en este ejemplo nosotros definimos un ancho fijo de 150px para la columna 0 y 50px para la columna 3.
language	Traducción de todas las cadenas de texto que usa DataTable.

Obteniendo datos del servidor

Una vez que dejamos inicializada y configurada nuestra tabla con DataTable, revisemos como obtendríamos la información del servidor web mediante PHP, para este ejemplo nosotros traemos una lista de usuarios registrada en nuestra base de datos.

Recuerdas que dentro de la configuración de la tabla definimos el parámetro sAjaxSource encargado de realizar la petición al servidor y como url definimos database/getusers.php, el siguiente código estaria dentro de este archivo.

<?php 

require 'conexion.php';

$sql = $conn->query( "SELECT * FROM users" );

$data = array();
$c = 0;

while ($row = $sql->fetch()) {
    $data[$c] = array();
    $data[$c]['name'] = $row['name']; 
    $data[$c]['email'] = $row['email']; 
    $data[$c]['age'] = $row['age']; 
    $data[$c]['idUser'] = $row['idUser']; 
    $c++;
}

$results = ["sEcho" => 1,
    "iTotalRecords" => count($data),
    "iTotalDisplayRecords" => count($data),
    "aaData" => $data ];
echo json_encode($results);

?>

Inicialmente, indicamos que requerimos el archivo conexion.php, ya que en él tenemos el código para la conexión a la base de datos, más abajo te dejo como sería la conexión.

Enseguida hacemos una simple consulta, en nuestro caso a la tabla users.

Vamos guardando los registros dentro del arreglo $data y finalmente en $results preparamos y convertimos los datos a JSON para ser enviados a DataTable.

Te comparto el código de la conexión a la base de datos.

<?php 

$server = 'localhost';
$username = 'root';
$password = '*****';
$database = 'example-datatable';

try{
$conn = new PDO("mysql:host=$server;dbname=$database;",$username, $password);
} catch(PDOException $e){
die('Conexión fallida: '.$e->getMessage());
}

?>

Finalmente, tendríamos una tabla diferente a lo habitual, con controles, paginación, filtros y demás características que provee DataTable. 😀