Responsive mode - "click" event and data expand conflict
Responsive mode - "click" event and data expand conflict
janusz4211
Posts: 1Questions: 1Answers: 0
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"?
Answers
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
spanelement 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
tdto reopen the child if it was open or closes it if it was closed.EDIT: I used
columns.renderto wrap the cell data in thespan.You may find better options. If so please post an example for others.
Kevin
I have fixed this issue. It is no doubt tricky. Follow the following steps to fix the issue.
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 .
Also set the scrollable property to false .
"columnDefs": [
Two separate columns will render, however it will look like one column...
@kthorngren what if I am using bootstrap responsive version of child details, anyway to not open child details when row click event occur?
@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
@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
@RenSword The solution presented in this thread triggers a second click of the
tdif 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 thetdin 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
tabletag is created and beforeresponsive.min.jsis loaded at the bottom of the HTML tab.There may be other ways to do this.
Kevin
Alright, thank you. I guess making new column just for
dtr-controlis easier to control click event. Although I kinda like that the defaultdtr-controlsave space.