DataTable slidedown row.child()

Question

I want to slide-down a div for each row when button is clicked. Currently dataTable row.child() calls format function in this form.

Refer fiddle: http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/

function format ( d ) {
  return '<div class="slider">Test Message</div>';
}

Is it possible to return div for each row as like below

<div class="slider">Test Message</div>

function format(d){
  return $('div.slider');
}

Finally the jQuery looks like this.

$('#example tbody').on('click', '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');
  }
});

Answer 1

You can add style="display: none" for .player element and slide that one up/down when necessary.

For example:

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

    if ( row.child.isShown() ) {
         row.child().find('.player').slideUp(400, function(){
            // This row is already open - close it            
            row.child.hide();

            tr.removeClass('shown');
         });
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        row.child().find('.player').slideDown();
        tr.addClass('shown');
    }
} );

Also you can return jQuery element in format() function, row.child() accepts jQuery as an argument as well. See row.child() API method for more information.

See updated jsFiddle for code and demonstration.

See Sliding child rows post for alternative solution.

Answer 2

To Avoid some extra transaction of Data from DB,by using this Code

$('#mytable').on('click', '.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    if (row.child() != null) {
        // This row is already open - close it
        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
        } else {
            row.child.show();
            tr.addClass('shown');
        }
    } else {
        var childTable = format(id, date);
        row.child(childTable).show();
        tr.addClass('shown');
    }
});