Tri de table avec deux rangées d’en-tête

Vous voulez probablement que les deux lignes de chaque entrée restnt groupées, auquel cas Tablesorter n’est pas conçu pour faire ce que vous voulez. Tinysort pourrait toutefois fonctionner si vous êtes prêt à placer chaque paire de rangées dans son propre tbody :

  ... 
 
 
 
Location
 
Full Name
 
Amount
 
 
 
Asset
 
Patron ID
 
User
 
Date/Time
 
 
 
 
 
Salem
 
Bob galvin
 
$3400
 
 
 
assert1
 
1148
 
sjauser
 
11/12 10:39 AM
 
 
 
 
 
chennai
 
sally n safer
 
$400
 
 
 
sdfsdgt1
 
4747
 
sjauser
 
11/12 10:39 AM
 
  

Comme Tinysort peut apparemment sortinger n’importe quel type d’élément, vous devriez pouvoir lui indiquer de sortinger les éléments tbody au lieu des rangées. Votre script pourrait faire quelque chose comme ceci, vaguement basé sur l’exemple de table dans la documentation Tinysort:

 $(document).ready(function() { var aAsc = []; $("#jackpotwatch>thead th").each(function(nr) { $(this).click(function() { aAsc[nr] = aAsc[nr] == 'asc' ? 'desc' : 'asc'; $("#jackpotwatch>tbody").tsort('td:eq(' + nr + ')', {order: aAsc[nr]}); }); }); }); 

Cela repose sur le fait qu’il y a exactement le même nombre de cellules dans les lignes d’en-tête que dans les lignes de chaque tbody.

Voir la démo ici.

Je n’ai pas de plugin pour vous, mais j’ai proposé l’approche suivante pour votre situation spécifique:

 /** * This approach assumes that records are always comprised of 2 rows. It is possible to make this configurable. */ ;(function() { //Get the table var table = $("#jackpotwatch"); //Make head header in the THEAD sortable. $("thead th", table).on("click", onSortableClicked); //Handle the sortable clicked event. function onSortableClicked(e) { //Find the column position. var c = -1, child = e.target; while ((child = child.previousSibling) != null) if (child.nodeType == 3) ++c; //Find the row position. var r = -1, child = e.target.parentNode; while ((child = child.previousSibling) != null) if (child.nodeType == 3) ++r; var subject = $("tbody", table); var replacement = sort(subject, r, c); subject.replaceWith(replacement); } function sort(subject, r, c) { var rows = $("tr", subject); //Get all the rows from the tbody. var sorted = document.createElement("tbody"); var vals = []; for (var i = 0; i < rows.length; i+=2) { var record = [rows.get(i), rows.get(i+1)]; //Record is two rows. var sub = record[r].children[c].innerText; //This is our sort subject. vals.push({"sub": sub, "record": record}); } vals.sort(compare); for (var i = 0; i < vals.length; ++i) { var val = vals[i]; sorted.appendChild(val.record[0]); sorted.appendChild(val.record[1]); } return sorted; } function compare(a, b) { var atext = a.sub.toLowerCase(); var btext = b.sub.toLowerCase(); return atext < btext ? -1 : atext > btext ? 1 : 0; } })(); 

Cela rend chaque élément TH élément THEAD sortingable. Il les sortinge sur la base d’une comparaison textuelle, minuscule.

Il est difficile de ne travailler qu’avec des enregistrements de deux ensembles de lignes. Toutefois, il peut être développé pour permettre de configurer le nombre de lignes constituant un seul enregistrement, ou même de le déduire automatiquement en comptant le nombre de lignes du THEAD .

Je l’ai utilisé sur le code HTML suivant:

 
 
 
 
Location
 
Full Name
 
Amount
 
 
 
Asset
 
Patron ID
 
User
 
Date/Time
 
 
 
 
 
Salem
 
Bob galvin
 
$3400
 
 
 
assert1
 
1148
 
sjauser
 
11/12 10:39 AM
 
 
 
chennai
 
sally n safer
 
$400
 
 
 
sdfsdgt1
 
4747
 
sjauser
 
11/12 10:39 AM
 
 
 
Mazdgfdg
 
afdagadg
 
789769
 
 
 
qwqeqe
 
47467
 
sjauser
 
11/12 10:39 AM
 
 
 
hurtyry
 
afadfadg
 
$12000
 
 
 
afadsf
 
25426546
 
sjauser
 
11/12 10:39 AM
 
 
  

Assurez-vous de placer le script après le code HTML ou dans un gestionnaire d’événements prêt:

 $(document).ready(function() { //Sorting code from above goes here. });