custom child row without AJAX, but no longer responsive

custom child row without AJAX, but no longer responsive

LauraSuzyLauraSuzy Posts: 12Questions: 4Answers: 1

I have a list of online courses in a table, and the data is short except for class description. I followed the ideas in this post https://datatables.net//forums/discussion/comment/73046/#Comment_73046 to get my table to display the class description (which I output via PHP in a column of my table that is hidden via CSS) in a child row when I click on the title column (the first column) in the parent row. I was so happy to finally get it working!

But now when I shrink my web browser window, the responsive functionality I had before is no longer working. It hides the other columns I specified in my columnDefs, but I cannot expand the child row anymore to see the data. I think because I specified a custom format for the child row that only contains the class description, I have created some sort of conflict. When I try to expand the row details and then resize the browser window, I can see the hidden columns until I click on the event title, and then the child row data gets replaced with my class description. How can I make it so that my class description is displayed in addition to the other columns which are hidden for mobile devices?

Perhaps this makes sense as-is... but I am trying to get a JSFiddle going so you can see my problem in action. I will post that when I have it ready. Thanks!

Answers

  • LauraSuzyLauraSuzy Posts: 12Questions: 4Answers: 1

    Here is the jsfiddle: https://jsfiddle.net/lshammond/26ekmky4/

    In this fiddle, I also have the problem that my class description isn't showing when I click the class title at first, but you can see the same problem I'm having on my actual site if you resize the window - first it shows you all the hidden column data (as it should, because responsive is true), but then when you click the class title, all of that data is replaced with the class description.

    The desired behavior is that clicking the class title would show the full class description in the child row, AND the relevant hidden column values (whichever are hidden based on the display size) below it. On a desktop display, the class description would be the only thing in the child row, because all of the other necessary columns are displayed in the table itself.

  • LauraSuzyLauraSuzy Posts: 12Questions: 4Answers: 1

    I figured it out! Instead of trying to put the description in the child row manually, I just need to use Responsive, set the priority on the description column super low, and make sure viewport breakpoints cause it to always be in responsive mode. I got rid of my handler for the clicks on the class title altogether.

    Eurkea!

  • kawisphoenixkawisphoenix Posts: 1Questions: 0Answers: 0

    hey , can you update the jsfiddle , i got the same problem , thanks for your help

This discussion has been closed.