jquery datatable row click with responsive

Question

i'm using jquery datatable with responsive the (+) responsive sign show correct when screen size decrease i had event row click on the table

 $('#datatables tbody').on('click', 'tr', function (e) {//Code});

My problem that the responsive button fires both function the responsive (Default) function that expand the row and my row click event

is there a way to Prevent that

Edit : Same happens with any attached button on the row if the button is clicked it execute both button click event and row click event

user_6686553 · Answer

I fixed the problem with UGLY workaround first i added empty td index 0 so that the responsive button show on it second i changed the event from tr click to td click then check for the td index

$('#datatables tbody').on('click', 'td', function (e) {
                    var tdIndex = this.cellIndex;
                    if (tdIndex == 0)
                    {//For Responsive Click leave Empty
                    }

                    else { //Normal Code}

i still waiting a better solution

user_10923276 · Answer

Try https://datatables.net/extensions/responsive/examples/child-rows/whole-row-control.html

if that does not help please assign a class to the column like:

"columns": [
    { "data": "MyColumn", "className": "toggle-btn-add" }
]

and call it like:

$('#datatables tbody').on('click', 'td.toggle-btn-add', function (e) {//Code});

Hope this helps

jquery datatable row click with responsive

2 Answers