MooTools: la librería más completa para trabajar fácilmente con javascript.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 20
Visitas el mes pasado: 27
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Tal vez es este uno de los efectos más demandados: que cuando presentemos una tabla en una página, las filas aparezcan con un cierto tipo de orden, y que además, al pulsar sobre cualquiera de los elementos de la cabecera, la tabla quede ordenada según el elemento pulsado.
Al instanciar una tabla de la clase HtmlTable(), podemos poner en la lista de opciones (segundo argumento) la opción sortable: true, la cual hace que los elementos de la tabla aparezcan ordenados.
sortable: true,
Esta opción tiene un valor booleano, que por defecto es false. Al cambiarlo a true se activan otras opciones con las que podemos controlar la ordenación de la lista. Estas son:
parsers: ["string","number","title"]
Vemos aquí a la derecha un ejemplo de tabla ordenable en el que hemos puesto alguna de las opciones vistas anteriormente. Al pulsar sobre las celdas de la cabecera, los elementos de la tabla se ordenan según la columna pulsada.
Los distintos estilos indicados por las opciones tipo "class" distinguen cuales son las celdas ordenadas, y si su ordenación es en sentido normal o en sentido inverso.
.Vemos a continuación los códigos para crear esta tabla. En javascript-mootools tenemos el siguiente código:
cabecera=["Nombre","Apellido","Teléfono"]; fila1=["Juan","Rodriguez","665447001"]; fila2=["Alberto","Barbacil","625500419"]; fila3=["Laura","Aparicio","621478695"]; fila4=["Carmen","Garrido","684211019"]; mitabla=new HtmlTable("mi_tabla",{ properties: {cellpadding:5, border:1, id:"mi_tabla",width: "100%"}, headers: cabecera, rows:[fila1,fila2,fila3,fila4], sortable: true, sortIndex: 1, parsers: ["string","string","number"], classSortable: "ordenables", classHeadSort: "orden_directo", classHeadSortRev: "orden_inverso", classGroupHead: "grupo", classCellSort: "celdas_ordenadas", });
En la hoja de estilos CSS añadimos también algunas líneas que se corresponden con las clases que se han indicado en las opciones. Por lo tanto en la hoja de estilo CSS añadimos el siguiente código:
#caja1 { width: 45%; float: right; margin: 1em 3em 1em 1em; border: 1px solid navy; } .ordenables { color: maroon; } .orden_directo { background-color: aqua; } .orden_inverso { background-color: #ffb6b7; } .grupo { background-color: silver; } .celdas_ordenadas { background-color: lime; }
Con esto completamos el código para el ejemplo que hemos dado.
Puedes ver más sobre este tema (tablas ordenadas) en la página de mootools.docs Class: HtmlTable.Sort (web oficial de mootools).
Relacionados con las tablas ordenadas podemos usar los siguientes métodos:
mitabla.disableSort();
mitabla.enableSort();
mitabla.reSort();
En la próxima página vamos a ver otro tema también interesante, cómo realizar eventos del teclado al pulsar las teclas.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com