Trier un tableau par colonne en jQuery
Comment trier des tableaux dans le navigateur sans recharger la page (= trier sans PHP) ?
<table id="mytable"><thead>
<tr>
<th id="sl">S.L.</th>
<th id="nm">nom</th>
</tr>
</table>
....
<script>
// sortTable(f,n)
// f : 1 ordre croissant, -1 ordre décroissant
// n : n-ième enfant (<td>) de <tr>
function sortTable(f,n){
var rows = $('#mytable tbody tr').get();
rows.sort(function(a, b) {
var A = getVal(a);
var B = getVal(b);
if(A < B) {
return -1*f;
}
if(A > B) {
return 1*f;
}
return 0;
});
function getVal(elm){
var v = $(elm).children('td').eq(n).text().toUpperCase();
if($.isNumeric(v)){
v = parseInt(v,10);
}
return v;
}
$.each(rows, function(index, row) {
$('#mytable').children('tbody').append(row);
});
}
var f_sl = 1; // indicateur pour inverser l’ordre de tri
var f_nm = 1; // indicateur pour inverser l’ordre de tri
$("#sl").click(function(){
f_sl *= -1; // inverser l’ordre de tri
var n = $(this).prevAll().length;
sortTable(f_sl,n);
});
$("#nm").click(function(){
f_nm *= -1; // inverser l’ordre de tri
var n = $(this).prevAll().length;
sortTable(f_nm,n);
});
</script>
Attention (état en septembre 2026) : la fonction $.isNumeric est obsolète (jQuery 4 l’a supprimée) – en JavaScript pur, vous pouvez utiliser par exemple !isNaN(parseFloat(v)) && isFinite(v). Les textes accentués sont triés correctement par la comparaison A.localeCompare(B, 'fr').