CODEWITHSUNDEEP
datatablesresponsive
Maher Khalil
Maher Khalil

Reputation: 539

jquery datatable row click with responsive

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

Upvotes: 2

Views: 2037

Answers (2)

yofi
yofi

Reputation: 33

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

Upvotes: 0

Maher Khalil
Maher Khalil

Reputation: 539

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

Upvotes: 3

Related Questions