CODEWITHSUNDEEP
jqueryhtmlcssdatatabledatatables
tony
tony

Reputation: 45

Exclude Responsive Data Tables + from onclick event

I have a DataTable (https://datatables.net) that is rendered dynamically. I have an on click event for the rows to bring up some data, I did from following this tutorial:

https://datatables.net/examples/advanced_init/events_live.html

I have a select box in the row that I excluded by doing this:

$('#resdatatable tbody').on('click', 'tr', function (e) {
if($(e.target).is('select')){
        e.preventDefault();
        return;
    }

Which works perfectly.

But now I am trying to make the Data Table responsive, so I am following this tutorial: https://datatables.net/extensions/rowreorder/examples/initialisation/responsive.html

Which is working great, but I need to exclude the little green + from the on click event as well, and I am trying to do that with this:

$('#resdatatable tbody').on('click', 'tr', function (e) {
if($(e.target).is('select') || $(e.target).hasClass('dtr-column') ){
        e.preventDefault();
        return;
    }

But it isn't working, I have no idea how to make this work or how to identify this little green or red button.

EDIT: Another way of doing this would be to exclude a click on the first column.

EDIT 2:

Using this:

$('#resdatatable tbody').on('click', 'tr:not(:first-child)', function (e) {
if($(e.target).is('select')){
        e.preventDefault();
        return;
}

Disables the first row, but not the first column...?

Upvotes: 1

Views: 729

Answers (1)

tony
tony

Reputation: 45

This is the way I solved the problem, it works perfectly:

 if($(e.target).is('select') || $(e.target).is('td:first-child') ){
            e.preventDefault();
            return;
        }

Upvotes: 2

Related Questions