0
나는 datatable에 대해 연구 중이다. 지금은 2 레벨의 소비 가능 데이터 테이블
https://www.datatables.net/examples/api/row_details.html
을 사용하고 그러나 문제는 우리가 한 번만 소비 할 수 있습니다 여기에있다, 그러나 나는 2 시간 소모품 만들고 싶어. 하면이 문제를 해결하는 방법.미리 감사드립니다.
나는 datatable에 대해 연구 중이다. 지금은 2 레벨의 소비 가능 데이터 테이블
https://www.datatables.net/examples/api/row_details.html
을 사용하고 그러나 문제는 우리가 한 번만 소비 할 수 있습니다 여기에있다, 그러나 나는 2 시간 소모품 만들고 싶어. 하면이 문제를 해결하는 방법.미리 감사드립니다.
내가 언급 한 링크의 모든 코드 (https://www.datatables.net/examples/api/row_details.html)를 사용하고 수정했습니다. 희망이 도움이 ...
<style>
td.details-control {
background: url('images/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('images/details_close.png') no-repeat center center;
}
td.details-control2 {
background: url('images/details_open.png') no-repeat center center;
background-position: top;
cursor: pointer;
}
tr.shown td.details-control2 {
background: url('images/details_close.png') no-repeat center center;
background-position: top;
}
</style>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
/* 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 class=details-control2></td>'+
'<td>Extra Info</td>'+
'</tr>'+
'</table>';
}
/* Formatting function for row details - modify as you need */
function format2 (d) {
// `d` is the original data object for the row
return '<br/><br/><table cellpadding="5" cellspacing="0" border="0" style="padding-left:250px;">'+
'<tr>'+
'<td>Start Date:</td>'+
'<td>'+d.start_date+'</td>'+
'</tr>'+
'<tr>'+
'<td>Position:</td>'+
'<td>'+d.position+'</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable({
"ajax": "./ajax/data/objects.txt",
"columns": [
{
"className": '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');
}
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control2', function() {
var tr1 = $(this).closest('table').closest('tr');
var trData = tr1.prev();
var rowData = table.row(trData);
if($(this).parent().hasClass("shown")) {
$(this).parent().removeClass('shown');
$(this).siblings('td').text('Extra Info:');
}
else {
$(this).siblings('td').append(format2(rowData.data()));
$(this).parent().addClass('shown');
}
});
});