How can i make sorting arrows separate?

[ghost]

I'd like to click the "Up arrow" and the column to sort in Asc order, click "Down arrow" and column to sort in Desc order. If it's already sorted that way then nothing happens.

How do i go about it without using additional widgets?

[Mottie]

Hi @telegraphinho!

It takes a little bit of extra code & css, but it's doable! (demo):

CSS:

.tablesorter .tablesorter-header {
    background-image: none;
    cursor: default;
}
.tablesorter-header span, .tablesorter .arrows {
    cursor: pointer;
}
.tablesorter-header .arrows {
    position: relative;
    float: right;
}
.tablesorter-header div.arrows i {
    position: absolute;
    right: 0;
    display: block;
    width: 15px;
    height: 15px;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
}
.tablesorter-header i.tablesorter-headerAsc {
    top: -5px;
    background-image: url(http://mottie.github.io/tablesorter/css/images/black-asc.gif);
}
.tablesorter-header i.tablesorter-headerDesc {
    top: 5px;
    background-image: url(http://mottie.github.io/tablesorter/css/images/black-desc.gif);
}
.tablesorter-headerAsc i.tablesorter-headerAsc {
    background-image: url(http://mottie.github.io/tablesorter/css/images/white-asc.gif);
}
.tablesorter-headerDesc i.tablesorter-headerDesc {
    background-image: url(http://mottie.github.io/tablesorter/css/images/white-desc.gif);
}

Script:

$(function () {
    var $table = $('table');

    $table.tablesorter({
        theme: 'blue',
        headerTemplate: '<span>{content}</span>' +
            '<div class="arrows">' +
                '<i class="tablesorter-headerAsc"></i>' +
                '<i class="tablesorter-headerDesc"></i>' +
            '</div>',
        onRenderHeader: function (index) {
            $(this).find('.arrows i').click(function(){
                var direction = $(this).hasClass('tablesorter-headerAsc');
                $table.trigger('sorton', [ [[ index, direction ? 0 : 1 ]] ]);
            });
        },
        // you can still click on the header text to toggle the sort
        selectorSort: 'span'
    });
});

In this demo, the only limitation is that you can't do a multi-column sort using only the arrows, but you can if you shift-click on the header text.

[ghost]

Thanks a bunch, @Mottie!!!

That's a really elegant solution!

[Mottie]

The demo was added under "Sorting" on the Home wiki page.