Responsive mode - "click" event and data expand conflict

janusz4211

Hello,
There is a simple datatables implementation, with responsive option enabled.

table = $('#table').DataTable( { responsive: true, ajax: "./ajax/data.php" });

There is jQuery OnClick event also:
$('#table tbody').on('click', 'tr td', function(e) { DO SOMETHING }

On "big screen" all working fine. There is one problem on small screen. When I click "plus" button (on screen) to expand row, the OnClick event is triggered.

I know, that I can use: tr td:not(:first-child) to prevent execute event on first column click, but it will make first column not clickable on "big screen" view also. Is possible to prevent execute event when I clicking "plus" button and parallely leave rest of first column clickable? Or prevent execute event when first column clicking only in "small screen"?

kthorngren

This is a tricky one as the Responsive button is displayed using the ::before pseudo element. One option is to determine, in the click event handler, if the pseudo element is clicked or the cell data. Since the pseudo element is not in the DOM there is no direct way to see if it has been clicked.

Stack Overflow has a lot of solutions to determine if the pseudo element is clicked. I opted for the last one in this thread. I wrapped a span element around the data in column 0 to use in the check for clicking the pseudo element. Here is the example:
http://live.datatables.net/tucizeyu/1/edit

Clicking the pseudo element opens or closes the child row and skips the processing of the click handler. Clicking anywhere else in the cell causes the click handler code to execute plus it clicks the td to reopen the child if it was open or closes it if it was closed.

EDIT: I used columns.render to wrap the cell data in the span.

You may find better options. If so please post an example for others.

Kevin

manjinderbajwa

I have fixed this issue. It is no doubt tricky. Follow the following steps to fix the issue.

1. Create seperate th and td for expand ICON.

2. It will show expand icon in new column , now hide the right border using the following css class on th and td.

   td.details-control {
   border-right: 0px solid #fff !important;
   }

   th.details-control {
   border-right: 0px solid #fff !important;
   align-items: center;

   }

assign this class to first th and td .

1. Also set the scrollable property to false .

   "columnDefs": [

           {
               "targets": [0], "orderable": false, orderData: [0],
           }  
   

2. Two separate columns will render, however it will look like one column...

RenSword

@kthorngren what if I am using bootstrap responsive version of child details, anyway to not open child details when row click event occur?

kthorngren

@RenSword I don't understand your question. I updated the above example with Bootstrap 5 and it only opens the responsive child if the icon is clicked.
https://live.datatables.net/tucizeyu/195/edit

Can you supply an example or update mine to show the problem you are having?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

RenSword

@kthorngren sry, I made a mistake on my sentence. I mean bootstrap responsive modal. When "Processing Click Event" occur, the modal still open.
https://live.datatables.net/veremilu/1/edit

kthorngren

@RenSword The solution presented in this thread triggers a second click of the td if the pseudo element is not clicked. This will be problematic when showing the modal due to the time it takes for the modal to display as its not immediate. Also the close button of the modal will need to be clicked, not the td in the example.

Instead the click event in the solution will need to take priority over the Responsive click event. It will need to use stopImmediatePropagation() to keep the responsive event handler from firing if the pseudo element is not clicked. The only way I know to do this is to initiate the event handler before loading the responsive.js library. See this updated example:
https://live.datatables.net/veremilu/2/edit

Note the click event handler is loaded after the table tag is created and before responsive.min.js is loaded at the bottom of the HTML tab.

There may be other ways to do this.

Kevin

RenSword

Alright, thank you. I guess making new column just for dtr-control is easier to control click event. Although I kinda like that the default dtr-control save space.