2014-08-28 1 views

답변

0

음이 줌라하지만이 가능 JQuery와 DataTable의 플러그인으로 당신을 위해 작동 할 수없는 것이이 편대 아코디언을 원하는

enter image description here

이하 그것은 부모/자식 관계를 가지고 있습니다.

http://datatables.net/examples/api/row_details.html

enter image description here

/* Formatting function for row details - modify as you need */ 
function format (d) { 
// `d` is the original data object for the row 
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
    '<tr>'+ 
     '<td>Full name:</td>'+ 
     '<td>'+d.name+'</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
     '<td>Extension number:</td>'+ 
     '<td>'+d.extn+'</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
     '<td>Extra info:</td>'+ 
     '<td>And any further details here (images etc)...</td>'+ 
    '</tr>'+ 
'</table>'; 
} 

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "ajax": "../ajax/data/objects.txt", 
    "columns": [ 
     { 
      "class":   'details-control', 
      "orderable":  false, 
      "data":   null, 
      "defaultContent": '' 
     }, 
     { "data": "name" }, 
     { "data": "position" }, 
     { "data": "office" }, 
     { "data": "salary" } 
    ], 
    "order": [[1, 'asc']] 
}); 

// Add event listener for opening and closing details 
$('#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'); 
    } 
    }); 
});