DataTable slidedown row.child（）

Question

ボタンをクリックしたときに各行のdivをスライドダウンしたいとします。現在、dataTableのrow.child（）はこの形式でformat関数を呼び出します。

はフィドルを参照してください。http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/

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

は

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

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

以下のように最後にjQueryのは、このようになりますよう、各行のためのdivを返すことが可能です。

$('#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

あなたは.player要素のstyle="display: none"を追加し、必要なときにその1をアップ/ダウンスライドさせることができます。例えば

：

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

また、あなたがformat()機能にjQueryの要素を返すことができ、row.child()も同様に引数としてのjQueryを受け入れます。詳細については、row.child() APIメソッドを参照してください。

コードとデモンストレーションについては、updated jsFiddleを参照してください。

代替ソリューションについてはSliding child rowsポストを参照してください。