Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82275

Child row not showing in responsive mode

$
0
0

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


Viewing all articles
Browse latest Browse all 82275

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>