Tri d'un tableau sur lequel cellule d'en-tête a été cliqué

Si j'ai le texte suivant:

<table>
<thead>
<tr>
<th><a href="Index.cfm?Sort=0">First</a></th>
<th><a href="Index.cfm?Sort=1">Second</a></th>
<th><a href="Index.cfm?Sort=2">Third</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td class="num">123</td>
<td><input name="XYZ"></td>
</tr>
</tbody>
</table>

Q: Comment puis-je trier la table du corps sur la base de laquelle le tableau d'en-tête de la cellule a été cliqué?

<script>
$('th a').click(function() {
    var $this = $(this).closest('th');
    console.log($this.index());
    return false;
});
</script>

(J'ai fait de chacun de la table d'en-tête des cellules de liens hypertextes, de sorte que si l'utilisateur a JavaScript désactivé, il sera de suivre le lien et être triés sur le côté serveur).

InformationsquelleAutor Phillip Senn | 2010-04-22
  1. 6

    Vous pourriez être intéressé par Plugin jQuery: Tablesorter ou tout n'importe quelle autre table de tri plugin.

    • Exactement. Pourquoi rouler quand il y en a beaucoup là-bas?
    • Ouais, j'ai regardé Tablesorter, mais il n'est pas jQuery-UI compatible, j'ai donc écarté cette possibilité.
    InformationsquelleAutor Crozin
  2. 3
    function OrderBy(a,b,n) {
if (n) return a-b;
if (a < b) return -1;
if (a > b) return 1;
return 0;
}
$('th a').click(function() {
var $th = $(this).closest('th');
$th.toggleClass('selected');
var isSelected = $th.hasClass('selected');
var isInput= $th.hasClass('input');
var column = $th.index();
var $table = $th.closest('table');
var isNum= $table.find('tbody > tr').children('td').eq(column).hasClass('num');
var rows = $table.find('tbody > tr').get();
rows.sort(function(rowA,rowB) {
if (isInput) {
var keyA = $(rowA).children('td').eq(column).children('input').val().toUpperCase();
var keyB = $(rowB).children('td').eq(column).children('input').val().toUpperCase();
} else {
var keyA = $(rowA).children('td').eq(column).text().toUpperCase();
var keyB = $(rowB).children('td').eq(column).text().toUpperCase();
}
if (isSelected) return OrderBy(keyA,keyB,isNum);
return OrderBy(keyB,keyA,isNum);
});
$.each(rows, function(index,row) {
$table.children('tbody').append(row);
});
return false;
});
    InformationsquelleAutor Phillip Senn
  3. 2
    /**
* This tidy function can sort your rows belonging to TBODY via an ID in your table
* The only thing it does is to sort a specific column in a ascending byte mode
* M.Rasch may 2010 xmlsoap.dk
*/
function sortColumn (id, colNo) {
var zTemp = [];
var rows = document.getElementById(id).getElementsByTagName('tbody')[0].getElementsByTagName('tr'); 
for(ix=0;ix<rows.length;ix++){
var column = rows[ix].getElementsByTagName('td')[colNo - 1]; //relative column offSet, one-based
zTemp[ix] = [];                                              //prepare 2nd dimension  
zTemp[ix][0] = column.innerHTML;                             //the "value" to sort ...
zTemp[ix][1] = rows[ix];                                     //and here goes complete row   
}
zTemp.sort(function (elmA, elmB){
if (elmA[0] === elmB[0]) return 0;
return (elmA[0] < elmB[0]) ? -1 : 1;
}
);
for(ix=0;ix<rows.length;ix++){                                  //Remove row collection entirely
var temp = rows[ix].parentNode;   
temp.removeChild(rows[ix]);
}
var tBody = document.getElementById(id).getElementsByTagName('tbody')[0];
for(ix=0;ix<zTemp.length;ix++){                                 //and re-insert them ...   
tBody.appendChild(zTemp[ix][1]);
}
}
    InformationsquelleAutor MikeyKennethR
  4. 1

    Ce n'est pas aussi simple qu'il y paraît.

    Tout d'abord, vous devez décider si vous allez seulement de tri alphanumérique ou des dates, des nombres, etc. Ensuite, vous devez aller à travers les données dans chaque cellule, l'ajouter à un tableau, trier le tableau, supprimer les tr de la table, et rajoutez-les dans le bon ordre.

    Comme il arrive, il y a un très bon plugin qui le fait pour vous:

    http://tablesorter.com/docs/

    • Mon client a toutes sortes de règles métier qu'il va se jeter sur la méthode de tri, donc je ne peux pas utiliser un plug-in. Je dois l'écrire moi-même. Je suis sur la page 160 de l'Apprentissage de jQuery 1.3, mais j'ai peur qu'il est hors de date car j'ai tout de suite vu qu'ils n'étaient pas à l'aide de l' .l'indice de la propriété, qui a été introduit dans la version 1.4.
    InformationsquelleAutor James Westgate
  5. 1

    Un autre plugin JQuery: http://datatables.net/

    Je crois que c'est censé être l'INTERFACE utilisateur de JQuery compatible.

    Edit:

    Un tri personnalisé fonctions sont prises en charge.

    http://datatables.net/plug-ins/sorting

    InformationsquelleAutor Matthew S
  6. 0
    function Ascending(a,b) {
if (a < b) return -1;
if (a > b) return 1;
return 0;
}
$('th a').click(function() {
var $th = $(this).closest('th');
var column = $th.index(); //Todo: url.Sort
var $table = $th.closest('table');
var rows = $table.find('tbody > tr').get();
rows.sort(function(rowA,rowB) {
if (column == 2) {
var keyA = $(rowA).children('td').eq(column).children('input').val().toUpperCase();
var keyB = $(rowB).children('td').eq(column).children('input').val().toUpperCase();
} else {
var keyA = $(rowA).children('td').eq(column).text().toUpperCase();
var keyB = $(rowB).children('td').eq(column).text().toUpperCase();
}
return Ascending(keyA,keyB);
});
$.each(rows, function(index,row) {
$table.children('tbody').append(row);
});
return false;
});
    InformationsquelleAutor Phillip Senn