jQuery Table sorter: stop sorting

Question

Is it possible to stop table sorting if user clicks on div inside of table header th?

In my case div has function onClick="resize(e)" on which I do:

function resize(e) {
        if (!e) var e = window.event;
        e.stopPropagation();
        ....

But it doesn't work.

Edit: Table is sorted before e.stopPropagation() or return false

Answer 1

I made two demos for you. The first one has the content of the table header wrapped in a span and the second one uses the undocumented onRenderHeader function to add the span inside the header. Either way, only the contents of the span are clickable (the text) while clicking outside of the content will sort the column. If you use a div only the header padding is available to initialize a column sort.

Demo 1 - header contents wrapped in the markup

$('table')
    .tablesorter()
    .find('.inner-header')
    .click(function(){
        console.log('header text clicked');
        return false;
    });

Demo 2 - header content wrapped using the onRenderHeader option

$('table').tablesorter({

    // customize header HTML
    onRenderHeader: function(index) {
        $(this)
            .wrapInner('<span class="inner-header"/>')
            .find('.inner-header')
            .click(function(){
                console.log('header text clicked');
                return false;
            });
    }

});​

If you need more information on using the onRenderHeader option, check out my blog post on what's missing in the documents.

Answer 2

I just ran into this exact problem. I tried everything suggested, including directly assigning a non-delegated event handler to the precise element I wanted, then stopping all propagation + the event itself. Still no luck.

But.... it turns out the jQuery tablesorter assigns an event to the mouseup event, not the click event (as you'd expect!). So to prevent tablesort from doing it's thing, you just need to cancel that event instead. Hope this helps.

• Ben

Answer 3

Stop propogation prevent event from bubbling up but it you want to cancel default action you should use event.preventDefault()