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:

• Plugin basado en jQuery, permite insertar a partir de cualquier selector jQuery.
• Permite la inserción independiente de varias tablas en la misma página
• Independencia de plantilla XSLT para cada tabla
• Estilos de cabeceras y filas basadas completamente en CSS
• Se ha quitado JavaScript embebido de la plantilla XSLT, todo el JavaScript se realiza desde el código del plugin

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:

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:

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 */ }