Clasificación del lado del cliente con html y Javascript

¿Cómo puedo crear una tabla html que el usuario pueda orderar usando los encabezados de columna para orderar por el lado del cliente? Puedo cargar todos los datos html de las filas en una matriz Javascript y usar dom para agregar una tabla a un div de contenido, pero ¿es correcto? Si enumera los principales methods, puedo encontrar el path desde allí, así que no estoy pidiendo el código.

Es posible que desee utilizar tablesorter , que es un complemento de jquery para la orderación de la tabla lateral del cliente.

No es necesario redevise la rueda en caso de que ya utilice un Marco JS, pero aquí hay algunas soluciones bonitas:

TableSorthttp://www.frequency-decoder.com/demo/table-sort-revisited/

JQuery tablesorterhttp://tablesorter.com/docs/#Demo

GridView3http://dev.sencha.com/playpen/ext-2.0/examples/grid/grid3.html

Guión de Stuart Langridgehttp://yoast.com/articles/sortable-table/

Mootools Mootoolshttp://joomlicious.com/mootable/

El tablesorter es bueno, pero usted quiere algo que tenga filtrado incorporado, y es ampliamente usado y soportado, intente http://datatables.net/

Cada tablesorter funciona así:

  1. get la table.tbody.rows en una matriz
  2. orderar esa matriz usando una function de comparación personalizada
  3. añada las filas al cuerpo de la tabla en el order correcto

Por lo general, será un poco más rápido si calcula previamente los valores para comparar (en lugar de acceder a los elementos DOM en cada comparación), la matriz contendría objects que tienen el valor en una ranura y la fila de tabla en la otra.

Si tienes una matriz, entonces llamar a sort() es probablemente tu mejor opción:

 function sortArray(a, b){ //could also say return ab instead of the blown out if...else construct if(a.Age===b.Age) { return 0; } else if (a.Age < b.Age) { return -1; } else { return 1; } } var rows = [{Name: 'Amy', Age: 10}, {Name: 'Bob', Age: 20}]; var sortedArray = rows.sort(sortArray); 

Como las otras respuestas han indicado, también puede usar un complemento. DataTables es uno bueno que he usado en el pasado.