El plugin DataTables (I). Qué es y cómo obtenerlo

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

datatablesA menudo nos encontramos conque tenemos un dataset, obtenido, por ejemplo, de una base de datos o cualquier otro proceso, con datos comerciales de un cliente, o facturas emitidas, o pedidos pendientes, etc. y tenemos que mostrarlo en la página que vamos a renderizar. El resultado debe ser una tabla con todos los datos, organizados en filas y columnas. Además, deben ser ordenables por las columnas que decidamos, deben admitir búsquedas de datos en tiempo real y, si hay demasiados resultados, deberían aparecer paginados. Todo esto y mucho más podemos hacerlo por programación, escribiendo nuestro propio código que realice cada una de las funciones necesarias. Sin embargo, es mucho más sencillo cuando existe ya un plugin, probado, que funciona bien, rápido y eficiente, y podemos configurarlo en cada caso según necesitemos. Este es DataTables.

OBTENER DataTables

Podemos obtener el plugin DataTables de su página oficial, en este enlace. El sitio está en inglés, pero, si estás familiarizado con lectura técnica, eso no es problema. Lo que sí puede serlo es la abundancia de contenidos que encuentras. Sólo de ejemplos hay una gran cantidad de páginas. Y están las de descargas. El plugin es gratuíto pero, si quieres soporte técnico, hay que pagarlo: más páginas. Y, para colmo, la información de uso está dispuesta de una manera que puede que les cuadre a las mentalidades anglosajonas pero, para nosotros, buscar cualquier ejemplo o sintaxis es una locura. Vamos, que, hablando claro: los árboles no te dejan ver el bosque. En este blog vamos a tratar de ayudarte a usar el plugin para que aprendas de una manera fácil y cómoda a sacarle partido. Por supuesto, no te enseñaremos absolutamente todas y cada una de las posibilidades del plugin. Son tantas que no creo, honestamente, que las conozca ni el fabricante. 😛 Sin embargo, lo que aprenderás en estos artículos te será más que suficirente para cualquier proyecto personal o profesional que desees acomenter en el que tengas que crear vistas de datasets en tablas.

REQUISITOS PREVIOS

Existen algunos requisitos que debes tener para poder usar este plugin, tanto a nivel de recursos cómo de conocimientos previos. Estos son:

  • Recursos:
    • Tener un servidor de desarrollo. Puede ser una máquina aparte de tu ordenador de trabajo, o un localhost. Debe incluir Apache, PHP (se recomienda la versión 7) y MySQL (te valdría otro motor, cómo PostgreSQL, Oracle, etc, pero en estos artículos emplearemos MySQL). Si quieres instalarte un localhost rápido, te recomiendo XAMPP (si usas Windows) o MAMP (si eres de Mac). En estos artículos trabajaremos sobre Windows.
    • En el servidor de desarrollo debes tener un directorio para hacer tus pruebas. En los artículos de esta serie lo he llamado datatables, claro.
    • Se aconseja contar con bootstrap para darle luego apariencia a las tablas, pero eso es un complemento. También se les pueden dar estilos “artesanos” con CSS. En estos artículos no profundizaremos en este asunto más de lo estrictamente imprescindible, para centrarnos en el uso de DataTables, que es lo que nos interesa ahora.
    • También debemos contar con un editor para código, tipo Notepad++ o Sublime Text 3.
    • Necesitamos contar también con jQuery, y se aconseja disponer de jQueryUI. En estos artículos, por comodidad, usaremos estos frameworks por CDN, para no tener que descargarlos físicamente en nuestro equipo.
    • Y, por supuesto, necesitamos el propio plugin DataTables, que podemos descargar de su página oficial, en este enlace. La descarga no es directa, sino que se accede a través de un configurador para descargar el paquete según nuestras necesidades. En este artículo veremos cómo vamos a descargarlo, de forma que nos convenga para seguir los demás artículos de esta serie.
  • Conocimientos previos. Para poder seguir estos artículos es necesario contar con conocimientos previos, a un nivel adecuado para sentirte cómodo, sobre las siguientes tecnologías y lenguajes:
    • PHP
    • MySQL
    • HTML 5
    • CSS 3
    • jQuery
    • Ajax
    • JavaScript

LA DESCARGA DEL PLUGIN

En la página de descarga del plugin vemos, cómo ya hemos comentado, que dicha descarga es configurable. Es decir. Podemos obtener una u otra versión del plugin según las opciones que marquemos, relativas a nuestras necesidades. Las opciones que podemos elegir son:

EPÍGRAFE MAIN LIBRARIES

jQuery. Podemos elegir descargar el plugin sin jQuery, con jQuery 2 o con jQuery 1. La opción a descargarlo con jQuery 3 aún no está disponible en la web, en el momento de escribir este artículo. Cómo hemos dicho que nosotros aquí usaremos jQuery por CDN en todos los ejemplos, no necesitamos que venga con el DataTables. Por lo tanto, dejaremos marcada la opción por defecto No jQuery.

Styling. Nos da opción a incluir estilos predefinidos en nuestras tablas de datos. Podemos usar los estilos nativos de DataTables (opcion por defecto: DataTables), los de bootstrap, los de Foundation o los de jQueryUI. Dejaremos la opción por defecto. Si luego queremos algún framework de estilos o lo que sea, lo incluiremos por CDN, pero, insisto, voy a centrarme en el funcionamiento del plugin.

DataTables. Se refiere a descargar el core del propio plugin. Esto no debería ser una opción. Creo que está claro. Si vamos a usar DataTables, necesitamos tener DataTables. Dejamos la opción por defecto, DataTables.

EPÍGRAFE EXTENSIONS

Este epígrafe incluye una serie de extensiones, que podemos usar o no en cada caso. En cada una de ellas aparece el nombre desmarcado y, como opción por defecto, Do not include (no incluir). Nosotros vamos a marcarlas todas, excepto la que pone Editor, ya que esta se refiere a un complemento de pago, del que hablaremos más adelante. Observa que, al marcar algunas opciones, te aparecen opciones secundarias. Es el caso de la extensión Buttons (Botones), que nos permitirá incluir botones adicionales en nuestras tablas, cómo veremos en su momento. Las subopciones de Buttons (que debemos marcar) son: Column visibility, Flash export, HTML 5 export y Print view. Además, al selecctionar HTML 5 export se despliega otro nivel de opciones que incluye JSZip y pdfmake: también las incluiremos. Cómo hemos dicho, cuando terminemos de marcar opciones en este epígrafe, sólo deberá quedar como Do not include la relativa a Editor. No importa que, por ahora, cómo es lógico, no sabemos para que nos va a servir todo esto. Ya le sacaremos partido. De momento, nos lo pillamos.

EPÍGRAFE PACKAGING OPTIONS

Aquí contamos con las opciones de descarga. La primera se refiere a si queremos la versión completa del plugin para desarrollo (Debug) o la versión minificada para producción (Minify). Si vas a querer bucear en el código, elige Debug. Para estos artículos elegiremos Minify.

La siguiente opción te pregunta si quieres todo el plugin en un fichero (Single file), o en varios (Individual files). Descárgalo cómo un sólo fichero, para reducir el número de llamadas HTTP en cada uso. Para desarrollo es, sin duda, la mejor alternativa.

La última opción te pregunta si quieres descargar el fichero resultante en tu ordenador (Local files), o usarlo por CDN. Vamos a elegir CDN para estos artículos, aunque, si lo deseas, puedes elegir Local files, si quieres curiosear el código.

A DESCARGAR

Al haber indicado que vamos a usar el plugin por CDN, no hay un botón de descarga. En su lugar, aparecen dos enlaces CDN que son los que deneremos incluir en nuestros códigos: El primero es relativo al CSS y el segundo a JavaScript. Son, según la configuración que hemos ido seleccionando, los siguientes:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script>

Realmente, por una cuestión de comodidad, en estos artículos vamos a emplear por CDN todo lo que podamos (bootstrap, jquery, etc). La lista de CDN’s que vamos a necesitar la tienes en este enlace. Verás que no siempre se usan todos pero, cuando te hagan falta, sólo es copiar y pegar.

En el próximo artículo veremos un uso básico de DataTables.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *