Child row not showing in responsive mode

carlosRangel

Link to test case: https://live.datatables.net/paquyaze/1/edit

Description of problem:

Hello folks.

I followed the instructions of this tutorial to create a DataTable with child rows and then combined with this other tutorial that converts the child row content to a Datatable without the editing part. The thing is that at the desktop the table looks nice, when I click the button the child row appears as a table making an Ajax call to my endpoint all correct. But in the responsive mode, when I test the table in mobile, the child row does not appear.

When I was creating the table, before implementing the child row functionality I noticed that in the mobile form, the rows that are not directly shown in the screen due to lack of space are hidden and when selecting the “:before” pseudo element that acts as a button the appear in the bottom as a child row. So, I think, the problem is I have several columns that need to be hidden in mobile, and then the logic of my child row that also appears when I click on the mentioned pseudo element is creating some sort of conflict.

Could anyone point me in the right direction? I want to create a DataTable with child rows. The data from the child rows has been obtained from a second ajax call that is different from the ajax call that populates the main table. This part is working fine, but I have problems with the responsive part of my table.

I tried to adapt the code in my test case to the code that I have in my local machine, basically is the same thing:

• A function that creates the main DataTable, obtains the data with an ajax call
• An event listener to the 'td.details-control' element, that is the pseudo element that works as a button to activate/deactivate the child row
• A function to create the child row, with a second ajax call to populate the new DataTable created in the child element
• A function to destroy the child DataTable

I hope this details would be enough to clarify my problem. I'm a little worried about the precision of my description because English is not my mother tongue so feel free to ask for clarification or further details.

Thanks in advance

carlosRangel

This is the second tutorial I used to learn how to create a child row in DataTable using a Datatable and another ajax call to fill it: Parent / child editing in child

kthorngren

Using Child rows and Responsive in the default mode of child rows is not supported. You will need to use the Responsive modal display instead. The Compatibility matrix states this:

Kevin

carlosRangel

Hey Kevin, thanks for your answer.

I would like to keep the functionality of child row in Desktop mode, and enable that useful Responsive Modal Display only on mobile. How could I deactivate my child row table on mobile?

It is possible?

Thanks in advance

Carlos

kthorngren

There is nothing built into Datatables for this. You will need to use Javascript methods to determine the screen size. Then use a conditional to apply the appropriate Datatables config and event handlers based on the size.

Kevin