Cómo ordenar una tabla HTML o XHTML usando Javascript, mediante el mouse o de forma automática.

Este código de ejemplo muestra una excelente forma de poder mostrar tablas de un documento HTML o XHTML de forma ordenada.

En el ejemplo se muestran dos formas de ordenar los datos de la tabla: De forma manual o automática.

La primera forma, el usuario puede ordenar la tabla haciendo clic en cualquier encabezado o columna de la misma. La otra forma, la tabla se ordena de forma automática al cargar los datos de la tabla.

El código fuente incluye 3 ejemplos y la documentación sobre los métodos, propiedades y eventos.

Indice - Contenido.

1. Ordenar columnas de tabla de forma manual.
2. Ordenar tabla de forma automática.
3. Mover filas de una tabla a otra tabla.
4. Documentación.

1 - Ordenar columnas de tabla de forma manual.

Esta es una vista previa de los ejemplos. Aquí se muestra la tabla HTML con varias columnas de datos: Orden, Título, fecha, número, descripción etc ..

Al pasar el mouse por encima del encabezado, esta se colorea para mostrar que toma el foco, y ya se puede hacer clic para ordenar de forma ascendente o descendente por cualquiera de los encabezados.

2 - Ordenar tabla de forma automática.

El otro ejemplo, muestra como ordenar de forma automática los datos. Incluye ejemplos para ordenar números, cadenas de caracteres, fechas, números decimales y monedas.

Nota: No permite seleccionar haciendo clic en la fila.

En esta imagen se ordena por el campo moneda.

3 - Mover filas de una tabla a otra tabla.

El último de los ejemplos, muestra cómo, por medio de un botón, pasar datos entre tablas, es decir mover un registro o fila de la primer tabla a la segunda tabla.

4 - Documentación.

En el archivo ZIP que incluye los ejemplos, también hay una carpeta con la documentación para manipular las tablas, por ejemplo:

• Constructor para crear la tabla ordenada.
• Parámetros.
• Métodos.
• Propiedades estáticas y dinámicas.
• Métodos relacionados al ordenamiento.
• Métodos relacionados a la selección de las filas de la tabla.
• Métodos para mover datos entre tablas.
• Eventos de mouse.
• Eventos de ordenación..

No hay video tutoriales disponibles para mostrar.