opening/rendering all hidden columns (with repsonsive true) button

mimhof

Greetings, I have a button that I have added to open/close all hidden rows. I was successful in discovering how to close them all but opening is different. I am using a customer renderer per responsive in my setup:

responsive: {                       
                    details: {           
                       renderer: function ( api, rowIdx ) {
                           
                              // Select hidden columns for the given row
                                        var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
                                        var header = $( api.column( cell.column ).header() );
                                              return '<tr>'+'<td>'+
                                                header.text()+':'+'</td> '+'<td>Quick test to see my render stuff'+
                                            api.cell( cell ).data()+'</td>'+'</tr>';
                                            } ).toArray().join('');
                                return data ?  $('<table/>').append( data ) :  false;

                }

Now, here is my questions, if I just have one hidden column, #8, I learned I can do this when my button is clicked:

 var table = $('#mytable').DataTable();   
     table.rows().eq(0).each( function ( idx ) {
                var row = table.row( idx );
                    if (! row.child.isShown() ) {
            var data = table.cell(idx,8 ).render( 'display' );   
                row.child(data,'child').show();
                       $( row.node() ).addClass( 'parent' );
                    }
                });

However, on small screen, I actually have several hidden columns per responsive. So my questions is replacing the call to var data = table.cell(idx,8 ).render( 'display' ); and accessing the logic setup in responsive, I have tried for example

var data = table.responsive.details.renderer( table, idx ); 

but obviously I am not grabbing the data! I know I can probably just rewrite the same logic in the responsive object, but I want to learn instead how to access it via the api.

Thanks in advance for the help.

allan

Hi,

Thanks for your question. The code that you are asking about in Responsive, which builds the ul/li list is not published in an API - it is internal to Responsive and not intended for public use. That code is defined here.

You could technically use $.fn.dataTable.Responsive.defaults.details.renderer( table, idx ); which would return a jQuery object that you could insert into the child row - but that is somewhat unexpected use to be honest and not something I would really recommend should the default be changed in a future release.

I would recommend simply providing your own function that will loop over the data for the row and create it in the child row.

Regards,
Allan

mimhof

Hi Allan thank you. I ended up not using the responsive.details.renderer and instead used columDefs render function. This allowed me to then do this as described in the forums somewhat:

 table.rows().eq(0).each( function ( idx ) {
                         var row = table.row( idx );
                         if (! row.child.isShown() ) {
                             var data = table.cells( idx, ':hidden' ).eq(0).map( function ( cell ) {
                                            var header = $( table.column( cell.column ).header() );
                                             return "<tr><td>"+header.text() +"</td><td>"+table.cell( cell ).render('display')+"</td></tr>" ;
                                      } ).toArray().join('');
                       data =  '<table style="white-space:normal;"><tbody>'+data+'</tbody></table>';
                        row.child(data,'child').show();
                             $( row.node() ).addClass( 'parent' );
                        }
                   });

Works great! In fact, I added an event to toggle that:

 table.rows().eq(0).each( function ( idx ) {
                var row = table.row( idx );
                    if ( row.child.isShown() ) {
                        $( table.cell(idx,0).nodes() ).closest('tr').removeClass( 'parent' );
                        row.child.hide();
                     }

                });

And then finally, got to thinking that because I am actually creating my entire options object server side, I check if the user has a setting for startopenrows in their user db table and if so, the following is created and triggered in initComplete to give them the ability to choose if their table starts with open child rows or not:

if(myoptionsobj.startopenrows) {
 // start with child rows all open
 $('#w-myopenrowstoggle').click() ; 

}