Table Header - Custom Buttons -> should not trigger order by

takaest

Hello there.
I have a custom button & dropdown in my datatables header which is generated in the initialization of the datatable. It could be added to multible column headers depending if it is useful. With the filter you can look for active, inactive or all elements.
My filter works fine but when clicked on it triggers the order filter from the datatable. The order filter table should not be triggered when my filter (the button & the dropdown) is clicked.

Here is an example of how my filter looks:

I had some ideas but nothing worked:

1. working with the z-index to put my filter out of the header to prevent the order by when clicked.
2. event.stoppropagation()
3. event.preventDefault()

Should be quite easy to solve.
Thanks

colin

Hi @takaest ,

See my comment in this thread, and Kevin's following comment - the same applies to you,

Cheers,

Colin

takaest

Thanks @colin

takaest

My solution was quite simple. I used the event.stoppropagation() in the filter. Thanks to
this thread from grutz.

Simple example:
html:
<option oninput="stopPropagation(event)" onclick="stopPropagation(event);">
</option>

js:

function stopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.preventDefault();
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.