row details page load

row details page load

alord84alord84 Posts: 24Questions: 15Answers: 1

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

```

Answers

  • alord84alord84 Posts: 24Questions: 15Answers: 1

    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);
    
  • allanallan Posts: 49,060Questions: 1Answers: 7,174 Site admin

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

    Allan

  • alord84alord84 Posts: 24Questions: 15Answers: 1
    edited September 2015

    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);
        });
    
This discussion has been closed.