Issue with table sorting using JavaScript and jQuery

Question

I'm having an issue when I try to sort my table based on the content in the first column. My code is pretty much the same as the one in this ANSWER but in my case, unfortunately, it does not work. As you can see running the snippet the table is not correctly sorted.

$('.sort-table').click(function(e) {
    e.preventDefault();                        // prevent default button click behaviour

    var sortAsc = $(this).hasClass('asc'),     // ASC or DESC
        $table  = $('#sort-table'),            // cache the target table DOM element
        $rows   = $('tbody > tr', $table);     // cache all rows from the target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).eq(0).text().trim();
        var keyB = $('td',b).eq(0).text().trim();
        
        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;     // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;     // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                    // append rows after sort
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>
<table id="sort-table" border="1">
    <tbody>
        <tr>
            <td>MOSELLE CONSTRUCTION ET FAÇADE SA</td>
            <td>xc</td>
            <td>xa</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>CHANTIER ECH SUR ALZETTE-STORE A " Z "</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td>xd</td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>ANTONIO GEORGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SATRAP DIFF PHASE x - x</td>
        </tr>
        <tr>
            <td>DE OLIVEIRA SANTOS - CWIEK CRISTOVAO ET IWONA</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>idem</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>FERNANDO - RODANGE</td>
        </tr>
        <tr>
            <td>DEMAY SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>IDEM</td>
        </tr>
        <tr>
            <td>BETRA SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LOT x RIES-WEISS (KAHLER)</td>
        </tr>
        <tr>
            <td>BER CREATION</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>BOUSSE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/ULx SEUIL MANQUANT</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/NachLieferung GLASLEISTE ELx</td>
        </tr>
        <tr>
            <td>MURIC &amp; FILS SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>x TELECOMMANDES</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>APP x DOMELDANGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LIMPERSBERG HS - GLAS</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - BETTANGE-REDING</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - DOMMELDANGE - KRAMER</td>
        </tr>
    </tbody>
</table>

wirey00 · Accepted Answer · 2015-01-20T16:00:53.593

You need to add another condition to check in your sort

    if (sortAsc) {
        // if a > b return 1 / if a < b return -1 / else same so return 0
        return (keyA > keyB) ? 1 : (keyA < keyB) ? -1 : 0;     // A bigger than B, sorting ascending
    } else {
        // if a < b return 1 / if a > b return -1 / else same so return 0
        return (keyA < keyB) ? 1 : (keyA > keyB) ? -1 : 0;     // B bigger than A, sorting descending
    }

Also there's no need to loop at the end to append the rows - you can just do

$table.find('tbody').append($rows);  // no need to loop through to append

$('.sort-table').click(function(e) {
    e.preventDefault();                        // prevent default button click behaviour

    var sortAsc = $(this).hasClass('asc'),     // ASC or DESC
        $table  = $('#sort-table'),            // cache the target table DOM element
        $rows   = $('tbody > tr', $table);     // cache all rows from the target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).eq(0).text().trim();
        var keyB = $('td',b).eq(0).text().trim();
        
        if (sortAsc) {
            return (keyA > keyB) ? 1 : (keyA < keyB) ? -1 : 0;     // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : (keyA > keyB) ? -1 : 0;     // B bigger than A, sorting descending
        }
    });
    $table.find('tbody').append($rows);  // no need to loop through to append  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>
<table id="sort-table" border="1">
    <tbody>
        <tr>
            <td>MOSELLE CONSTRUCTION ET FAÇADE SA</td>
            <td>xc</td>
            <td>xa</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>CHANTIER ECH SUR ALZETTE-STORE A " Z "</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td>xd</td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>ANTONIO GEORGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SATRAP DIFF PHASE x - x</td>
        </tr>
        <tr>
            <td>DE OLIVEIRA SANTOS - CWIEK CRISTOVAO ET IWONA</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>idem</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>FERNANDO - RODANGE</td>
        </tr>
        <tr>
            <td>DEMAY SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>IDEM</td>
        </tr>
        <tr>
            <td>BETRA SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LOT x RIES-WEISS (KAHLER)</td>
        </tr>
        <tr>
            <td>BER CREATION</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>BOUSSE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/ULx SEUIL MANQUANT</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/NachLieferung GLASLEISTE ELx</td>
        </tr>
        <tr>
            <td>MURIC &amp; FILS SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>x TELECOMMANDES</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>APP x DOMELDANGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LIMPERSBERG HS - GLAS</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - BETTANGE-REDING</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - DOMMELDANGE - KRAMER</td>
        </tr>
    </tbody>
</table>

Issue with table sorting using JavaScript and jQuery

1 Answers1