Accueil >JavaScript >Exemples en JavaScript >Trier un tableau par colonne en jQuery

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').