Cambia el orden de los artículos tipo tabla.

Question

Tengo un conjunto de divs-como mesa (con filas y cols), para mostrar una mesa de fútbol. Ahora, necesito poder ordenar esa tabla según la clave elegida, sin actualizar la página y evitar el uso de ajax.

Siendo más específico, necesito capturar los valores dentro de cada " columm " refiriéndose a la clave elegida y reordenar la tabla.

Uso jQuery, por lo que el trabajo debería ser bastante fácil, pero no estoy seguro de cómo reordenar una matriz con la identificación del equipo y la columna en la causa. Por cierto, todos los valores de la tabla son numéricos.

A continuación se muestra un ejemplo del marcado (fila):

<div class="rb">
        <div class="cname">Benfica</div>
        <div class="tdr bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold">0</div>
</div>

¿Algún pensamiento?

Answer 1

Supongamos que tienes una matriz de objetos, donde cada objeto corresponde a una fila de la tabla, y cada objeto tiene propiedades correspondientes a las columnas de la tabla.

var table = [
   { rowId: 1, teamName: 'Man U', country: 'England' },
   { rowId: 2, teamName: 'FC Barcelona', country: 'Spain' }
];

ahora, si tiene sus datos ordenados de esta manera, puede crear una función en la que solo puede decir drawTable (table) y creará el formato HTML que desee. Luego puedes ordenar esa variable, de esta forma:

function sortTable(table, column) {
    table.sort(function(x,y) { return x[column] > y[column]; });
    return table;
}

$('#sortByTeamName').click(function() {
   table = sortTable(table, 'teamName');
   drawTable(table);
});