Es muy común para los que desarrollamos en web tener que usar tablas para mostrar datos.
Si la tabla no es muy grande, solemos darle unos estilos básicos y preocuparnos poco por ellas.
Pero qué pasa si la tabla empieza a crecer y crecer... Y nuestros usuarios quieren poder hacer búsquedas por los campos de las tablas, y además quieren ordenar por cualquier columna,...
Rápidamente empezamos a buscar algo en jQuery que nos ayude un poco, pero vemos que no hay nada en concreto. Lo que sí vemos es que hay muchos plugins sobre jQuery que nos ayudan sobre las tablas.
Hoy vamos a ver uno de estos plugins: datatables (https://www.datatables.net/)
Y creo que lo mejor es que veamos los cambios con un ejemplo.
Supongamos que tenemos esta tabla:
Vamos a añadir jquery y el plugin DataTables:
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
Y ahora vamos a invocar al plugin con estas líneas:
$(document).ready(function() {
$('#example').DataTable();
} );
Probamos y:
Esto ha mejorado bastante, no tiene estilos, pero ya tiene paginación, y un buscador sobre todas las columnas.
Si nos vamos a la documentación, vemos que hay una css por defecto que podemos usar, y unas imágenes que nos ayudarán a hacer la tabla más funcional.
Copiamos la carpetas "images" y la css que nos interesa. Añadimos css al código:
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
Y volvemos a probar:
Esto ya es una tabla en condiciones, con la imágenes ya nos aparecen los controles para poder cambiar el orden de las columnas.
Sí, tenemos que cambiar algunas cosas: los textos por defecto, alguna alineación,... Pero hay que reconocer que nos hemos quitado unas cuantas horas de programación de encima.
En nuestro repositorio podéis ver este ejemplo en los tres pasos que hemos hecho:
Tenéis éste y muchos más ejemplos en la web del plugin (https://www.datatables.net), además de mucha documentación para indagar y personalizar mucho más vuestras tablas.