Table not quite being sorted properly

Question

I have a table with columns:

• Artist
• Song Title
• Album
• Add to playlist

I have some code that sorts the table rows by artist.

function sortAsc(a, b) {
var aText=$(a).find('.artist').text();
var bText=$(b).find('.artist').text();
return aText==bText?0:aText<bText?-1:1;
}
function sortTheTable(){
    $(function() {
        elems=$.makeArray($('tr:has(.artist)'));
        elems.sort(sortAsc);
        $('#songs').append(elems);
    });
}

window.onload = function() {
  document.getElementById("artistsort").onclick = function() {
    sortTheTable();
  }
}

And here is some HTML I'm using to test it:

<table class="table" style="table-layout:fixed">
                <thead>
                    <tr>
                        <th><a href="#" id="artistsort">Artist/Band:</a></th><th>Song:</th>
                        <th>Album:</th>
                        <th style="padding-left:6%">Add to Playlist</th>
                    </tr>
                </thead>
            </table>

<table id="songs" class="table table-hover" style="table-layout:fixed">
                    <form action="">
                        <tr>
                            <td class="artist">Capital Cities</td><td class="songtitle">Safe and Sound</td><td>In a Tidal Wave of Mystery</td>
                            <td style="text-align:center"><input type="checkbox" name="addsong" value=""></td>
                        </tr>
                        <tr>
                            <td class="artist">Capital Cities</td><td class="songtitle">Kangaroo Court</td><td>In a Tidal Wave of Mystery</td>
                            <td style="text-align:center"><input type="checkbox" name="addsong" value=""></td>
                        </tr>
                        <tr>
                            <td class="artist">Two Door Cinema Club</td><td class="songtitle">Remember My Name</td><td>Beacon</td>
                            <td style="text-align:center"><input type="checkbox" name="addsong" value=""></td>
                        </tr>
                        <tr>
                            <td class="artist">Anamanaguchi</td><td class="songtitle">Blackout City</td><td>Dawn Metropolis</td>
                            <td style="text-align:center"><input type="checkbox" name="addsong" value=""></td>
                        </tr>
                    </form>
                </table>

What ends up happening is that it sorts the rows by artist as intended, but the order of songs by the same artist gets mixed up every time "Artist/Band:" gets clicked.

I don't want a solution that involves some plugin, I can find plenty of those on my own.

I just want to know what is going on here.

Answer 1

welcome to the subtleties of sorting algorithms. As noted in my comments, you're asking for what is known as a stable sorting algorithm. But browser implementations of sort() aren't required to be stable. Some are; some aren't. To solve your problem reliably you'll have to use your own sort algorithm rather than the built-in. More information in this question: Fast stable sorting algorithm implementation in javascript