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

Raphu

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)

allan

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

colin

@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

Raphu

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

Raphu

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

sandy

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

Raphu

1000 thanks Sandy

it works perfectly !!

Raphu

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);
    }
})