Clasificación del encabezado jQuery en la tabla creada con div - jquery, sorting, jquery-plugins

Quiero ordenar el contenido de la tabla haciendo clic en el encabezado de cada columna.

Esta pregunta ya fue hecha aquí. jQuery tabla de encabezado de orden pero el complemento jquery señalado allí (que en realidad es muy bueno) funciona con las etiquetas html de la tabla. ¿Hay algún complemento para hacer exactamente lo mismo si mi tabla está escrita con divs?

Ejemplo de HTML:

<div class="table">
<div class="header">
<div class="col1">col1</div>
<div class="col2">col2</div>
<div class="col3">col3</div>
</div>
<div class="item">
<div class="col1">content11</div>
<div class="col2">content21</div>
<div class="col3">content31</div>
</div>
<div class="item">
<div class="col1">content12</div>
<div class="col2">content22</div>
<div class="col3">content32</div>
</div>
</div>

Respuestas

Si no puedes evitar escribir el códigoa ti mismo, el proceso básico para escribir esto mismo sería el siguiente. Puede sonar como un dolor, pero si sus datos están limpios, los selectores de jQuery realmente lo ayudarán aquí:

• Iterar a través de su cuadrícula de datos asignando 2 clases a cada celda (una única para la fila y una única para la columna). Un bucle anidado lo haría, junto con jQuery "s .addClass(). Los necesitará más adelante como selectores de jQuery. Incluiría los encabezados de tabla en esta iteración, pero les asignaría la clase de "etiqueta".

• Haz cada uno de tus encabezados de mesa $(".label") hacer clic

• Cuando un $(.label) al hacer clic, obtener el nombre de clase de la fila o columna y seleccionar todas las celdas que coincidan. Iterar sobre esta matriz (elementos html), y crear una segunda matriz de los datos que contiene cada celda (a través de .html(), quizás). Ordene esta matriz, luego úsela para volver a llenar su matriz original de elementos, y estará bien.

Puede parecer complejo, pero jQuery fue realmente construido para este tipo de cosas. Buena suerte.