Question

I have some code to sort a table in jQuery as shown below.

   $(document).ready(function() {
        //grab all header rows
        $('thead th').each(function(column){
            $(this).addClass('sortable').click(function() {
                var findSortKey = function($cell) {
                    return $cell.find('.sort-key').text().toUpperCase()
                    + ' ' + $cell.text().toUpperCase();
                };

                var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;

                //step back up tree and get the rows with data
                //for sorting
                var $rows = $(this).parent().parent().parent().find('tbody tr').get();

                //loop through all the rows and find
                $.each($rows, function(index, row) {
                    row.sortKey = findSortKey($(row).children('td').eq(column));
                });

                //compare and sort the rows alphabetically or numerically
                $rows.sort(function(a, b) {
                    if (a.sortKey.indexOf('-') == -1){
                        if (parseInt(a.sortKey) < parseInt(b.sortKey)) {
                            return -sortDirection;
                        }
                        if (parseInt(a.sortKey) > parseInt(b.sortKey)) {
                            return sortDirection;
                        }
                    } else {

                        if (a.sortKey < b.sortKey) {
                            return -sortDirection;
                        }
                         if (a.sortKey > b.sortKey) {
                            return sortDirection;
                        }
                    }

                    return 0;
                });

                //add the rows in the correct order to the bottom of the table
                $.each($rows, function(index, row) {
                    $('tbody').append(row);
                    row.sortKey = null;
                });

                //identify the column sort order
                $('th').removeClass('sorted-asc sorted-desc');
                var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
                sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');

                // identify the column to be sorted by
                $('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');

                //$('.visible td').removeClass('odd');
                //zebraRows('.vi')
            });
        });
    });

Also the css

root { 
    display: block;
}

th.sortable {
    color: #666;
    cursor: pointer;
    text-decoration: underline;

}
th.sortable:hover{color:black;}
th.sorted-asc, th.sorted-desc { color:black;
          background-color: cadetblue;
}

This works for one table, but not for multiple tables. Is there any way I could do this based on the ids of the divs the tables are nested in?

Answer 1

Some of the selectors need to be made specific to the table in question.

By progressive improvement, I arrive at the following :

$(document).ready(function() {
    function findSortKey($cell) {
        return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
    };
    function sortFn(a, b) {
        if (a.sortKey.indexOf('-') == -1) {
            return parseInt(a.sortKey, 10) - parseInt(b.sortKey, 10);
        } else {
            return a.sortKey - b.sortKey;
        }
    }
    $('thead th').each(function(column) {
        $(this).addClass('sortable').click(function() {
            var $th = $(this);
            var sortDirection = $th.is('.sorted-asc') ? -1 : 1;
            var $tbody = $th.closest('table').children('tbody');
            var rows = $tbody.children('tr').get();
            $.each(rows, function(index, row) {
                row.sortKey = findSortKey($(row).children('td').eq(column));
            });
            rows.sort(function(a, b) {
                if(sortDirection == 1) { return sortFn(a, b); }//sort asc.
                else { return sortFn(b, a); }//reverse a and b to sort desc.
            });
            $.each(rows, function(index, row) {
                $tbody.append(row);
                row.sortKey = null;//??
            });
            var filterSelector = ':nth-child(' + (column + 1) + ')';
            $th.removeClass('sorted-asc sorted-desc').filter(filterSelector).addClass( (sortDirection == 1) ? 'sorted-asc' : 'sorted-desc' );
            $tbody.children('td').removeClass('sorted').filter(filterSelector).addClass('sorted');
        });
    });
});

untested, so may need debugging

Apart from correcting the selectors, the most significant changes are to pull a couple of functions outside the outer each() loop and to simplify the sort function.