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를이 모양처럼 각 행에 대해 사업부를 반환하는 것입니다 :

는 바이올린을 참조하십시오.

$('#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"를 추가하고 필요한 경우 하나를 위/아래로 슬라이드 수 있습니다. 예를 들어

:

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

은 또한 당신은 row.child()뿐만 아니라 인수로 jQuery를 받아, format() 기능에 jQuery를 요소를 반환 할 수 있습니다. 자세한 내용은 row.child() API 메소드를 참조하십시오.

코드 및 데모는 updated jsFiddle을 참조하십시오.

대체 솔루션은 Sliding child rows 게시물을 참조하십시오.