row details page load

alord84

Tohave the row details expand on page load - is that possible?
````
$('#example tbody').on('pageload', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

```

alord84

any suggestions here?

var openDetailRow = function(tr){
        var row = table.row( tr );    if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    };

    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        openDetailRow( tr );
    });

    // Just a guess on which would be the first to show.
    // Replace with whichever one should be shown.
    var initialRowToShowDetails = $('#example tbody tr').first();
    openDetailRow(initialRowToShowDetails);

allan

Your code there looks okay as far as I can tell. Can you link to the page so it can be debugged please.

Allan

alord84

Here is what I wanted, works fine now for -> Row details - opening nth Row.

function onRowDetailsClick(table){
   var tr = $(this).closest('tr');
   var row = table.row( tr );
 
   if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
   } else {
      // Open this row
      row.child( format(row.data()) ).show();
      tr.addClass('shown');
   }
}

$(document).ready(function() {
    var table =....


'initComplete': function(settings){
           var api = new $.fn.dataTable.Api(settings);
          
           // Open 4th row, zero-based index
           api.$('tr')
              .eq(3)
              .find('td.details-control')
              .each(function(){
                 onRowDetailsClick.call(this, api);
              });
        }
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function (){
       onRowDetailsClick.call(this, table);
    });