Comment sortinger une colonne contenant deux div avec jQuery Tablesorter?

J’utilise jQuery Tablesorter pour sortinger une table. Une de mes colonnes ressemble à ceci:

  Yes (unverify) 
  No/a> (verify)

En d’autres termes, il y a deux divs, l’un pour montrer Oui en vert avec un lien et l’autre pour montrer Non en rouge avec un lien. L’un des divs est toujours masqué et les deux sont basculés chaque fois que l’utilisateur clique sur le lien.

jQuery Tablesorter ne peut pas sortinger sur cette colonne. Y at-il un moyen de le faire, ou dois-je modifier le code HTML pour que cela fonctionne?

Vous pouvez utiliser le rappel textExtraction :

 $(document).ready(function() { // call the tablesorter plugin $("table").tablesorter({ // define a custom text extraction function textExtraction: function(node) { // check you're at the right column if ($(node).find('.green').length == 1) { // extract data from markup and return it return $(node).find('div:not(.hidden)').find('span').text();; } else { return $(node).text(); } } }); });

Je n’ai pas testé ça mais ça devrait marcher en théorie

vous voudrez peut-être créer un parsingur personnalisé . C’est assez simple, il vous suffit de spécifier comment interpréter la valeur de la cellule en transmettant une fonction au champ format.

Une manière générique de sortinger tout type de colonne, quelle que soit la complexité du contenu: ajoutez l’atsortingbut ‘sortis’ à la valeur, remplissez la case ‘sortis’ du côté serveur en fonction de la commande préférée (ce qui est plus facile qu’en JavaScript).

par exemple

   Yes (unverify) 
  No<>/a> (verify) 
    > Yes (unverify) 
  No<>/a> (verify)

puis ajoutez le code suivant dans $ (function ()

 $("table.tablesorter").tablesorter({ textExtraction: function(node){ return $(node).attr("sorter"); } });