How to hide all td when Responsive mode begin with renderer function

How to hide all td when Responsive mode begin with renderer function

RaphuRaphu Posts: 9Questions: 3Answers: 0
edited May 2021 in Responsive

Link to test case: http://live.datatables.net/vikohoxo/1/edit?html,js,output

Description of problem:

Hello
First of all a huge thank you for your work ... it's just wonderful ...

I use the renderer function for responsive mode to display <div> instead of <tds> it works perfectly but I would like that as soon as 1 td becomes child, all the td disappear. because my div which appears below already contains all the info of all my td. by playing with mediaqueries in css I manage to make a display-none according to certain screen width but the table sometimes disappears at unexpected times

could you help me?

sorry for my broken english (this is a google translation)

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 55,832Questions: 1Answers: 8,817 Site admin

    Good question. I don't think we have an example of how to show a single details row at a time, but we will create such an example and get back to you.

    Allan

  • colincolin Posts: 14,172Questions: 1Answers: 2,401

    @Raphu Can we just be clear on what you're looking for, please. Are you saying that if one column is responsively hidden, then you want other columns to automatically be hidden too? Or, are you saying if any columns are responsively hidden, then you want only a single row to be displayed?

    Colin

  • RaphuRaphu Posts: 9Questions: 3Answers: 0

    if one column is responsively hidden, then I want other columns to automatically be hidden too...

  • RaphuRaphu Posts: 9Questions: 3Answers: 0

    as you can see on http://live.datatables.net/vikohoxo/1/edit?html,js,output , in responsive mode my data appears twice...

  • sandysandy Posts: 913Questions: 0Answers: 234
    Answer ✓

    Hi @Raphu ,

    I've been taking a look at this today. Take a look at this example, it should show you how to do what you want.

    The trick here is not to rely on responsive to do the child rows for you and to instead create and insert them yourself when desired. I'm sure you will be able to modify this to suit your use case, any questions just let me know.

    Thanks,
    Sandy

  • RaphuRaphu Posts: 9Questions: 3Answers: 0

    1000 thanks Sandy

    it works perfectly !!

  • RaphuRaphu Posts: 9Questions: 3Answers: 0
    edited May 2021

    Just a question anyway, I don't understand this line in your code :
    when I remove it, it still works

    // When the table is initialised

    $('#example').on('init.dt', function() {
    
     THIS LINE ==== var table = $('#example').DataTable(); === THIS LINE
    
    
      // If there is a column that has been hidden due to responsive
      if (table.columns().responsiveHidden().indexOf(false) !== -1) {
            // Hide the rest of the columns and show the child rows.
            hideCols(table);
            showChildRows(table);
        }
    })
    
This discussion has been closed.