Podemos odiar o amar javascript – yo lo amodio -, pero lo que no podemos negar es que jQuery es muy útil a la hora de hacer animaciones o hacer llamadas AJAX. A mi me volvió loquísima, desde luego. De hecho mi primer contacto con jQuery fue para hacer una animación de un mensaje emergente y mi vida no ha sido la misma desde entonces.
En esta entrada quiero hablaros un poco de un plugin de jQuery que creo que no se conoce demasiado y que es muy útil a la hora de gestionar elementos organizados en tablas: DataTables.
¿Qué qué hace exactamente DataTables? Pues le da un estilo bonito a tus tablas – que se puede cambiar si te da por ahí, claro – y permite que, declarando las tablitas en un archivo .js, puedas tener controladores para ordernar ascendente y descendentemente por columnas cada uno de los elementos de la tabla SIN TENER QUE PROGRAMAR TÚ ESA FUNCIONALIDAD.
La web del plugin es esta, y ahí podéis ver un ejemplo de una tabla que se ha montado con DataTables. No voy a decir que sea perfecta porque discrimina mayúsculas de minúsculas, letras con y sin tilde, y – de esto nos dimos cuenta cuando vimos el error – si le metes cualquier marcador html a la celda, ordenará teniendo en cuenta el código html se vea o no en la página – es decir, los estilos mejor por CSS y por columnas, no por celdas, y nos olvidamos de “” para los restos (si no nos habíamos olvidado ya, digo) -. Por no mencionar que si lo que necesitas ordenar no es por orden alfabético te toca implementarlo igual – voy a comentar cómo hacerlo más adelante -. Pero bueno, el orden alfabético te lo apaña, y te deja las tablas bonitas. Que ya es mucho.
En el trabajo tuvimos que apañar lo de las mayúsculas/minúsculas y las tildes, y no me gustó el modo en el que se hizo porque apañaba cada tabla por separado en vez de atacar directamente el plugin, así que no voy a comentar cómo lo hicimos aquí, ni en este post ni en ninguno: Si voy a comentar chapuzas que sean mías al 100%, las de los demás que las cuenten ellos. Pero seguramente en un futuro haga otro post sobre cómo atajar estos problemillas – si supone un problema para alguien, o como ejercicio teórico -.
Volviendo al tema: Añadir DataTables al código de una aplicación es tan fácil como añadir esta línea a la página en la que tengamos la tabla que queramos organizar:
$(document).ready(function(){
$('#idTabla').DataTable();
});
Nosotros lo organizábamos de este modo: En un .js que llamábamos dataTableUser (o dataTableAdmin), dentro del $(document).ready, metimos la inicialización de todas las tablas. Este .js se añade o bien vía un .jsp de importaciones o bien directamente en la página(s) – que también es un .jsp – donde se usen tablas. O en todas. O en el .jsp de la cabecera de la página, y así nos aseguramos que se incluye en todas. Esto ya es como se vea más organizado en cada proyecto.
Antes de meterme a lo que tiene que haber dentro de la llamada a DataTable(), comentar que también hay que añadir el CSS de estilos y el código del plugin propiamente dicho. Puedes importar del sitio web directamente, o bajarte los archivos y modificarlos como te venga bien a ti según en lo que estés trabajando, pero en cualquier caso se pueden encontrar aquí:
CSS: //cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
JS: //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
Ahora pasamos a los argumentos de la llamada a DataTable(). Aquí voy a comentar los que usamos nosotras, si queréis indagar más no tenéis nada más podéis hacerlo en la web de Datatables:
bJQueryUI – marcado como true activa el soporte para ThemeRoller (esto tiene que ver con la apariencia que le quieras dar a la tabla, más información en futuras entradas)
sPaginationType – modo de paginación. Por defecto tiene dos: ‘two_button’ y ‘full_numbers’.
bAutoWidth – activa o desactiva el cálculo automático del ancho de columna. Por temas de rendimiento (se tarda tiempo en calcular el ancho) lo suyo es ponerlo a ‘false’
bRetrieve – esto tiene que ver con la inicialización de la tabla, aunque no lo tengo muy claro. La ponemos a ‘true’.
oLanguage – autoexplicativo 😛
aaSorting – La ordenación inicial al cargar la tabla. Es un array de pares [columna, orden ascendente o descendente]. Se puede indicar más de una columna.
iDisplayLength – tamaño de página
aoColumns – este parámetro es muy interesante. Cuando se explicita, la tabla deberá tener exactamente el mismo número de columnas que elementos tenga este parámetro (es un array). Cada columna, obviamente, se corresponderá con un elemento en el vector. Se podrá dejar a ‘null’ si queremos que las opciones por defecto de DataTables se apliquen. Podemos hacer que esa columna no sea ordenable con ‘{ “bSortable”: false}’, que la columna sea o no visible con ‘{“bVisible”:false}’, determinar el tipo de la columna (dependiendo del tipo que tenga la columna se ordenará de un modo u otro) con ‘sType’, y varias cosas más que podéis investigar más a fondo aquí.
Aquí os dejo un ejemplo de cómo incializamos una tabla en nuestra aplicación:
$('#idDeTablaDeCosas').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bRetrieve": true,
"oLanguage": getOLanguage(),
"aaSorting": [[ 0, "desc" ]],
"iDisplayLength": 25,
"aoColumns": [
{"sType": "fecha-hora"},
{"bVisible": false},
null,
null,
null,
null
]
});
Si os fijáis la primera columna tiene de tipo “fecha-hora”. Este tipo nos lo hemos montado nosotros para poder ordenar fechas con formato “dd/MM/yyyy hh:mm” de forma realista (no alfabética, vaya).
El código que debemos añadir es el de la ordenación, y se hace de la siguiente forma:
jQuery.fn.dataTableExt.oSort['fecha-hora-asc'] = function(a, b) {
var x = dateHeight(a);
var y = dateHeight(b);
var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
return z;
};
jQuery.fn.dataTableExt.oSort['fecha-hora-desc'] = function(a, b) {
var x = dateHeight(a);
var y = dateHeight(b);
var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
return z;
};
Lo interesante aquí es la primera línea de las funciones, como podéis ver son las llamadas a jQuery de la ordenación ascendente y descendente de las columnas con el tipo de datos ‘fecha-hora’. El código de dentro… pues es javascript con la ordenación que queremos que implemente, claro. Os dejo aquí las funciones para este caso concreto, y claro, para otros tipos que no se ordenen alfabéticamente el procedimiento sería similar pero con la implementación pertinente para cada caso.
function trim(str) {
str = str.replace(/^\s+/, '');
for (var i = str.length - 1; i >= 0; i--) {
if (/\S/.test(str.charAt(i))) {
str = str.substring(0, i + 1);
break;
}
}
return str;
}
function dateHeight(dateStr){
if (trim(dateStr) != '') {
var frDate = trim(dateStr).split(' ');
var frTime = frDate[1].split(':');
var frDateParts = frDate[0].split('/');
var day = frDateParts[0] * 60 * 24;
var month = frDateParts[1] * 60 * 24 * 31;
var year = frDateParts[2] * 60 * 24 * 366;
var hour = frTime[0] * 60;
var minutes = frTime[1];
var x = day+month+year+hour+minutes;
} else {
var x = 99999999999999999; //GoHorse!
}
return x;
}
De getOLanguage() ya si eso hablo en otra entrada 😛 Creo que ya es suficiente para que os hayáis hecho una idea de cómo usar el plugin y de cómo os ayuda a la hora de ordenar por columnas una tabla.
*************************************************************
Espero que esta entrada pueda ser de utilidad, y si no, como siempre, aquí tenéis un gato para compensar:
