Changer l'ordre des articles de type table

Question

J'ai un ensemble de divs-like (avec des lignes et des colonnes), pour afficher un tableau de football. Maintenant, je dois pouvoir commander cette table en fonction de la clé choisie, sans rafraîchir la page et éviter d'utiliser ajax.

Étant plus spécifique, je dois saisir les valeurs à l'intérieur de chaque "columm". en vous référant à la clé choisie et réorganisez la table.

J'utilise jQuery, le travail devrait donc être assez facile, mais je ne sais pas comment réorganiser un tableau avec l'identifiant de l'équipe et la colonne en cause. Les valeurs de la table sont toutes numériques en passant.

Vous trouverez ci-dessous un exemple de balise (ligne):

<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>

Avez-vous des idées?

Answer 1

Supposons que vous disposiez d'un tableau d'objets, chaque objet correspondant à une ligne de tableau et chaque objet ayant des propriétés correspondant aux colonnes du tableau.

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

Maintenant, si vos données sont arrangées de cette façon, vous pouvez créer une fonction dans laquelle vous pouvez simplement dire drawTable (table) et créer le balisage HTML souhaité. Vous pouvez ensuite faire un tri dans cette variable, comme ceci:

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);
});