jQuery gridXML

Permite crear tablas ordenables a partir de un listado XML en formato LISXML. Se hace clic sobre las cabeceras de cada columna para ordenar.

Añadidos con respecto a la versión original:

Código:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.gridxml.js"></script>
<script>
$(document).ready(function() {
  //cuando la página se cargue, insertamos las tablas que queramos usando AJAX, con gridXML
	$("#mitabla").gridxml({
		xml:"grid.xml",   //Url del archivo XML o cualquier servlet que genere un resultado en LISXML
		xsl:"grid.xml"   //Url del archivo xsl que sirve de plantilla para la tabla, si no se indica usará el fichero grid.xml en la ruta relativa al documento
 });
});
</script>

Demo:

Cargando tabla...

Seleccionando la columna por defecto a ordenar

Seleccionamos una columna por defecto a ordenar .

Código:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.gridxml.js"></script>
<script>
$(document).ready(function() {
	$("#mitabla2").gridxml({
xml: "grid.xml", //fichero XML a mostrar en formato tabla
xsl: "grid.xsl", //fichero XSL de plantilla para la tabla (puede ser otro)
sortOrder: "descending", //Tipo de ordenamiento "descending" o "ascending"
sortColumn: "fecha_emision", //nombre de la columna a ordenar por defecto
type: "date" //tipo de la columna que queremos ordenar por defecto
});; }); </script>

Demo:

Cargando tabla2...

Estilos: danto estilo a las cabeceras de las columnas y filas impares

Seleccionamos una columna por defecto a ordenar .

Los estilos de la tabla se definen dentro del fichero XSL, las cabeceras de las columnas no tienen una clase definida, aunque podemos cambiarlo simplemente editando el fichero XSL, además, al poder especificar ficheros de plantilla independientes para cada tabla, podemos insertar tablas con diferentes estilos dentro de la misma página.

Código:

/* Estilos por defecto en la plantilla grid.xsl */
.filaimpar{ /* Filas impares */
.filapar{ /* Filas pares */
.tableSortDown{ /* Cabecera columna orden descendente */ }
.tableSortUp{ /* Cabecera columna orden ascendente */ }