Accepted answer

you are using d3 so use d3 ascending and descending it will fix. here is the code it will fix your issue.

if (sortAscending) {
    rows.sort(function(a, b) {return d3.ascending(b[d], a[d]);  });
    sortAscending = false;
    this.className = 'aes';
else {
    rows.sort(function(a, b) { return d3.descending(b[d], a[d]); });
    sortAscending = true;
    this.className = 'des';


.sort() does not work as you are expecting it should be some thing like this

rows.sort(function (a, b) {
            return a - b;


rows.sort(function (a, b) {
    if (a > b) {
        return 1;
    if (a < b) {
        return -1;
    // a must be equal to b
    return 0;


I would recommend you to use a jQuery plugin called TableSorter. It's available under both MIT and GPL licences.

First give your table an ID.

.attr("id", "myTable")

Now enable table sorter on mouseover of the TH .

.on("mouseover", function mouseover(p) {
    $("#myTable").tablesorter()   // where mytable is the id of your table

Hope this helps.

Related Query