Comment utiliser jQuery pour le tri des balises div côté client?

Question

Je souhaite autoriser l'utilisateur d'une application Web à trier les résultats d'une requête sans appel de serveur. Je suis à la recherche du type habituel de click-the-header-to-sort-based-on-the-column.

Cependant, je ne travaille pas avec une table réelle. Je vais manipuler des balises div basées sur le contenu. Existe-t-il une méthode jQuery pour faciliter cela?

Answer 1

This Tutorial vous guidera sur le chemin que vous cherchez. Il est axé sur le tri des données tabulaires dans les tables html, mais vous pouvez facilement reformuler les exemples pour travailler avec un groupe de divs ou d'éléments de liste, ou autre. Certaines des instructions proposent des techniques JavaScript brutes, avec jQuery pour le support, c'est donc un bon guide. Par exemple, il vous apprend à utiliser la méthode JavaScript dans la méthode sort(). Voulez-vous trier par ordre alphabétique? Voici un extrait modifié de ce guide:

var parent_of_divs = $('#parent-of-divs'), rows; 
rows = parent_of_divs.children('div').get(); 
rows.sort(function(a, b) { 
    var keyA, keyB; 
    keyA = $(a).text().toUpperCase(); 
    keyB = $(b).text().toUpperCase(); 
    if (keyA < keyB) return -1; 
    if (keyA > keyB) return 1; 
    return 0; 
}); 
$.each(rows, function(index, row) { 
    parent_of_divs.append(row); 
}); 

Answer 2

Voir ce question sur le tri des articles li. Avec peu de changements, il peut également être appliqué dans votre cas. Entre autres, le plug-in TinySort est recommandé.

Answer 3

vous pouvez vouloir utiliser jquery template lib. vous pouvez créer un modèle, puis transmettre un objet de données au modèle pour le rendu. Lorsque vous souhaitez modifier l'ordre de tri, vous pouvez modifier l'objet de données, puis "mettre à jour()" votre modèle.

Answer 4

Il y a un exemple ok ici:

Example

Je trouve qu'il est assez bon. En outre, c'est un plugin léger (si vous ne voulez pas implémenter votre propre). Pour moi, le code était assez clair même si je suis nouveau à la langue.