jquery tablesorter : determining sort order for column

Question

Is it possible for http://tablesorter.com to sort on different values depending on whether the sort is ascending or descending ?

I see how to return sort values for a cell based on arbitrary data with a parser (i.e.: http://code-cocktail.in/hidden-value-sorting-in-jquery-tablesorter-plugin/ ) , so returning different values in different situations seems simple enough.

The bit I'm banging my head on is that I cannot seem to determine the sort order when parsing. It looks like I can re-parse cells when a sort is being requested via the following:

 $(".tablesorter").bind("sortStart",function() { 
        $(".tablesorter").trigger("update");
 });

... however it looks like at the "sortStart" point the order of the sort isn't known, so the parser cannot provide different values based on that column's sort order.

Is this possible ? Thanks :-)

can try poking through the data stored on main table element and see if there is any current sort settings there — charlietfl
– charlietfl, Commented Jan 8, 2015 at 23:36

Community · Accepted Answer · 2017-05-23 10:26:10Z

2

For the following code to work, you'll need to use my fork of tablesorter which has css, widgets and addons that are not compatible with the original version.

This is somewhat similar to this Stackoverflow question except that it allows sorting one column using two different values (both answers work nicely using different methods).

A minor modification is required to use one value during ascending sort and another during descending sort (demo):

HTML (one cell)

<th class="gamename">
    <span class="name">Fun Fun</span>
    <span class="perc">96%</span>
</th>

Script

$(function () {

    $('#games').tablesorter({
        theme: 'blue',
        textExtraction: {
            0: function (node, table, cellIndex) {
                var $n = $(node);
                // add semi-colon between values
                return $n.find('.name').text() + ';' + $n.find('.perc').text();
            }
        },
        textSorter: function (a, b, direction, columnIndex, table) {
            if (columnIndex === 0) {
                var c = table.config,
                    x = a.split(';'),
                    y = b.split(';'),
                    // sort column by percentage when descending sort is active
                    i = c.$headers.eq(0).hasClass('tablesorter-headerDesc') ? 1 : 0;
                return $.tablesorter.sortNatural($.trim(x[i]), $.trim(y[i]));
            } else {
                return $.tablesorter.sortNatural(a,b);
            }
        }
    });

});

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Jan 9, 2015 at 16:56

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Carpeneto Over a year ago

This really is stellar - thanks for taking the time to point me in the right direction (thanks also for the demo - realy fantastic :-) ).

tom Over a year ago

Great work @mottie Thanks! I used this to learn about textSorter in general, but then to simply always add another sort column first, whenever sort is run....

Collectives™ on Stack Overflow

jquery tablesorter : determining sort order for column

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related