http://jsfiddle.net/jrick/3BTH9/
En estado colapsado, por default, las filas están ordenadas según la columna "Length", de manera que la primera fila es la que tiene 6ft, la segunda 5ft, etc. Ahora, bien, clickeando sobre cada fila, vemos que surge otra fila bajo cada una de ellas, que contienen varias lineas alfanuméricas fijas. (notar que cada una de esas filas ocultas consiste en una única fila de tabla que contiene tres lineas de párrafos <p>...</p>, una debajo de otra)
Yo pretendo que, al pinchar sobre una fila raíz en particular para mostrar la fila oculta bajo ella, y simultáneamente a la expansión, (y a ser posible, mediante animación con jquery, parecido a esto) el contenido de esta y el de la oculta se re-ordene automáticamente según la otra columna, "Diameter", y una vez ordenado, se detenga. Es decir, por ejemplo, si la fila que se muestra como primera (en el modelo KL-23) estando en estado colapsado es la de (6ft 0.5"), una vez expandiendo la oculta, la que pasaría a ser primera sería la que tiene mayor valor en la columna diámetro, es decir, la de (5.5ft 0.56"), y una se permutaría automáticamente con otra. Y una vez se clickee otra vez sobre la fila raíz para ocultarla, la permutación se deshaga y las filas vuelvan a su orden inicial, cuando estaban ocultas.
He visto por ahí muchos ejemplos de funciones como tableSort(), pero siempre utilizan un botón para inicializar la función. Pero mi idea es algo más compleja y no encuentro nada con lo que guiarme. Y he preguntado en muchos lados, y nadie me dice nada, no sé si es porque es demasiado difícil, o porque los programadores pasan de calentarse la cabeza gratuitamente.
