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

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

logo_datatables_editor_pngEl plugin DataTables, cuyo uso hemos aprendido a lo largo de los artículos anteriores, no sólo nos sirve para mostrar datos tabulares de una manera elegante, y con poco esfuerzo de programación. En esta serie vamos a conocer un complemento que nos va a permitir agregar registros, editarlos o eliminarlos, de una manera cómoda, elegante y con poco trabajo. Después de todo, esa es la filosofía de jQuery: conseguir los mejores resultados con poco código, en poco tiempo, y de modo fiable y sencillo. Cómo nos dice el propio eslogan de jQuery, “Escribe menos, haz más”.

El editor de DataTables es un complemento perfecto para agregar a nuestras tablas estas funcionalidades, y no podíamos pasarlo por alto. Si bien es una herramienta de prueba, con una duración de quince días, su licencia no es realmente cara. Para un desarrollador único, el coste es de poco más de 130 euros y, desde luego, te puedo asegurar que merece la pena. Y si no, lee los siguientes artículos, y juzga tú mismo. Y si trabajas en un equipo de desarrolladores, en una empresa, el coste, aunque algo mayor, no es relevante para la economía de una compañía.

OBTENER EL EDITOR

Lo primero de todo es echar un vistazo general a la sección que, dentro del sitio de DataTables, han dedicado a este complemento. La puedes encontrar en https://editor.datatables.net/. Entra sin miedo (eso es gratis).

Encontrarás información general (toda en inglés, eso sí), y una breve descripción de las excelencias del editor. Los fabricantes, por supuesto, recalcan sus ventajas y posibilidades y, como iremos viendo, no exageran un ápice. Es, junto al propio DataTables, una de las herramientas que más te facilitarán la vida a la hora de desarrollar proyectos profesionales (y no, no llevo comisión).

Para obtener el editor, lo primero que debes hacer es registrarte en la página. Esto también es gratis. Simplemente pulsa el enlace Login/Register que hay en la parte superior. Se te abrirá un formulario flotante que debes cumplimentar para registrarte. Una vez registrado, e identificado como usuario, podrás pulsar el enlace Download, en la columna de enlaces que hay en la parte izquierda de la página.

La página de descargas te ofrece tres posibilidades para descargar el editor: con códigos PHP para las operaciones CRUD en la base de datos, con las mismas funcionalidades en ASP .NET y, por último, sólo el código JavaScript y CSS del editor. Esta última es la opción más minimalista, aunque nos permitirá hacer cosas muy interesantonas. Es esta última, de momento, la que vamos a descargar, así que pulsa sobre el correspondiente botón en la página de descargas. El complemento del editor no puede, al contrario de lo que hemos estado haciendo hasta ahora, emplearse por CDN, sino que tiene que estar en la carpeta de tu proyecto.

Una cosa que debes tener en cuenta, si finalmente decides adquirir la licencia, es que, una vez adquirida, es de por vida, para todas las revisiones 1.x que salgan del editor, y que puedes emplearla en todos los proyectos que desees, profesionales o no, retribuidos o no. Lo que no te permite la licencia es modificar el código, ni revenderlo a terceros, evidentemente.

El comprimido de la descarga, para poder trabajar con el editor, lo vamos a extraer en un directorio al que llamaremos, simplemente, editor, dentro de la carpeta de proyectos en localhost que estemos usando para los artículos de DataTables. En mi caso, como empleo xampp, la carpeta donde estoy guardando los códigos para los articulos de la serie DataTables se llama C:/xampp/htdocs/datatables/, y el editor está dentro de C:/xampp/htdocs/datatables/editor/. Al extraer lo que me he descargado de la página, dentro de esta última ruta, me encuentro con tres directorios: css, images y js. Eso es todo lo que necesitaremos.

Atención. En la actualidad, el fabricante ha dejado de incluir la carpeta images, por lo que deberás crearla tú mismo. Cuando necesitemos una imagen para estos tutoriales la incluiremos en esta carpeta.

INCLUYENDO EL EDITOR

Incluir el editor en nuestros proyectos con DataTables es muy sencillo. Al principio de la página que será script principal (siguiendo la forma de llamarlo que hemos usado en los artículos de DataTables), y dentro de la sección <head>, debajo de las llamada a los CSS de bootstrap, DataTables y otros que pudiera haber, incluiremos la siguiente línea:

<link rel="stylesheet" type="text/css" href="editor/css/editor.dataTables.css">

Al final de la sección <body>, después de incluir los javascript de las herramientas que ya estamos usando, incluiremos la siguiente línea:

<script type="text/javascript" src="editor/js/dataTables.editor.js"></script>

Y ¿ya está? ¿Eso es todo? Bueno. Es todo lo que necesitamos incluir por ahora, para empezar. Por supuesto, por mucho que el editor nos simplifique las cosas, algo de programación sí vamos a tener que meter, y un poquito sí tendremos que trabajar. Lo iremos viendo a partír del próximo artículo, donde empezaremos a entrar en harina. Este ha sido sólo para preparar el entorno (y ya vale, ¿no?). 🙂 

     

Deja un comentario

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