JQuery datatables
datatables es una extensión de jQuery que nos permite pintar tablas con paginado, búsqueda, ordenar por columnas, etc. En la misma página de datatables tienes ejemplos como este. Veamos aquí lo básico para empezar con datatables.
Descargar[edit]
Necesitamos jQuery y datatables. Si descargamos el zip de datatables, viene con una versión de jQuery y algo de CSS, por lo que con ese zip en principio tenemos todo lo necesario para empezar a trabajar. La otra opción es bajarse sólo el javascript de datatables, pero necesitaremos bajarnos por separado jQuery y hacernos algo de CSS.
Por ello, lo mejor para empezar y tener todo lo necesario, es bajarse el zip y desempaquetarlo en algún sitio de nuestro gusto. De ese zip, una vez desempaquetado, nos interesan los directorios <PATH_DATA_TABLES>/media/js, <PATH_DATA_TABLES>/media/css, <PATH_DATA_TABLES>/media/images, que contienen respetivamente el javascript, los css y las imágenes para algunos botones de la tabla (siguiente, anterior, etc).
Copiamos estos tres directorios en el sitio donde vayamos a hacer nuestro tabla.html, de esta forma
./tabla.html ./js/*.js ./css/*.css ./images/*
El HTML básico[edit]
Vamos con la tabla más sencilla de todas. Hacemos un HTML con un
cualquiera. Es importante darle un id al tag <table id="tabla">
<thead>
<tr><td>columna 1</td><td>columna 2</td><td>columna 3</td><td>columna 4</td></tr>
</thead>
<tbody>
<tr><td>uno</td><td>dos</td><td>tres</td><td>cuatro</td></tr>
<tr><td>cinco</td><td>seis</td><td>siete</td><td>ocho</td></tr>
<tr><td>nueve</td><td>diez</td><td>once</td><td>doce</td></tr>
<tr><td>trece</td><td>catorce</td><td>quince</td><td>dieciseis</td></tr>
</tbody>
</table>
Inicializar datatable[edit]
En el HTML debemos incluir los javascript necesarios e inicializar nuestra tabla. para ello, entre los <head> incluimos los javascript
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
Para inicializar la tabla, ponemos el siguiente código javascript (entre los <head> o al empezar el <body>)
<script>
$(document).ready(function() {
$('#tabla').dataTable();
})
</script>
Visualizando la página en un navegador, debemos ver algo como lo siguiente
Es muy "cutre", pero es porque nos falta el CSS, vamos a añadirlo
Estilo CSS en los datatables[edit]
Lo primero que podemos hacer para dar estilo es incluir el css que viene de ejemplo. Entre las cabeceras <head> ponemos
<link type="text/css" href="css/jquery.dataTables_themeroller.css" rel="stylesheet"/>
con esto ya tenemos algo mejor
pero todavía nos falta un poco, hay que dar estilo a las cabeceras, botones y demás. Aquí es donde nos salimos de datatable, o mejor dicho, donde datatable "delega" en jQuery. Lo mejor para coger unos ficheros de estilo sin tener que hacerlos desde cero, es irse a la página ThemeRoller (Construir tema CSS para jQuery), que nos permite crear fácilmente estilos para jQuery y descargarlos para usarlos en nuestra página. Yo he hecho uno y me lo he bajado. Dentro de lo que viene en el zip, nos interesa el directorio css, que lleva dentro (en varios subdirectorios) los ficheros css y los iconos. Lo ponemos en algún lado de nuestra estructura de directorios y hacemos el enlace correspondiente
<link type="text/css" href="css/jquery.dataTables_themeroller.css" rel="stylesheet"/> <link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet"/>
Nos falta un último detalle, hay que decirle a datatables que ponga los class de CSS de jQuery en la tabla, para ello, añadimos un parámetro en la inicialización que hicimos de nuestra tabla
<script>
$(document).ready(function() {
$('#tabla').dataTable({
bJQueryUI : true
});
})
</script>
Con bJQueryUI:true le estamos indicando que queremos que la tabla tenga un estilo de jQuery. Ahora la imagen ya es más bonita
Por supuesto, la botonería funciona correctamente, búsqueda, cambio de página, items visibles, etc, etc. En el siguiente enlace hay un listado de todas las opciones que se pueden poner en la inicialización. Esto incluye si queremos paginado o simplemente un scroll vertical, si queremos que se pueda hacer click en las columnas para ordenar y en cuales, si queremos coger los datos de algún fichero o de un servidor en vez de ponerlos directamente en el HTML, etc, etc, etc.
Coger datos de un fichero[edit]
Puesto que es interesante, vamos a ver cómo se cogen los datos de algún tipo de fichero hospedado en el servidor. El fichero puede ser fijo, o bien puede ser cualquier script en nuestro lenguaje de programación favorito de servidor (php, jsp, etc) de forma que puede consultar los datos en una base de datos o cualquier otro sistema. El fichero o el script debe devolver los datos en formato json de la siguiente manera
{ "aaData" : [
["a",1,"rojo","I"],
["b",2,"verde","II"],
["c",3,"azul","III"]
]}
es decir, un "aaData" con un array de arrays. Cada array será una fila de la tabla y debe tener tantos elementos como columnas tenga la tabla.
En el HTML, ya no hace falta poner las filas, podemos dejar el <tbody> vacío
<table id="tabla">
<thead>
<tr><td>columna 1</td><td>columna 2</td><td>columna 3</td><td>columna 4</td></tr>
</thead>
<tbody>
</tbody>
</table>
Debemos dejar, eso sí, las columnas y asegurarnos que nuestro json de datos tiene tantas columnas como columnas hayamos puesto en el <script>
$(document).ready(function() {
$('#tabla').dataTable({
bJQueryUI : true,
sAjaxSource : 'datos.php'
});
})
</script>
donde sAjaxSource indica el fichero con los datos en json, como hemos comentado, fijos o con algún script (php en este caso) que los devuelva de una base de datos o cualquier otra fuente.
Actualizar la tabla con AJAX[edit]
Si una vez inicializada necesitamos refrescar los datos, debemos llamar a la funcion fnClearTable() de nuestra tabla para borrar los datos y luego añadir los nuevos datos usando la funcion fnAddData(). En nuestro ejemplo, vamos a añadir un botón de refrescar que recargará los datos de nuestro fichero datos.php y los pondrá en la tabla.
<script>
tabla = $(document).ready(function() {
$('#tabla').dataTable({
bJQueryUI : true,
sAjaxSource : 'datos.php'
});
})
</script>
Lo primero, cuando inicializamos la tabla, debemos guardárnosla en alguna variable (tabla en este ejemplo), para poder luego llamar a sus funciones. En algún lado del HTML ponemos el botón de "Refrescar" con el código javascript asociado
<input type="submit" value="Refrescar" onClick="refrescar()"/>
<script>
function refrescar() {
var request = $.ajax("datos.php",{dataType:'json'});
request.done(function (resultado) {
tabla.fnClearTable();
tabla.fnAddData(resultado.aaData);
});
}
</script>
Cuando se hace click en el botón, se llama a la función refrescar() de javascript. Esta hace una llamado con Ajax con jquery al fichero datos.php, indicando que el resultado es "json" (es lo que nos devuelve nuestro datos.php). Cuando obtenemos el resultado, simplemente borramos los datos de la tabla y le añadimos "resultado.aaData" (Revisa el json devuelto en punto anterior, verás que "aaData" es la clave con la que empieza el array de datos".