是否有人使用具有向下钻取行和嵌套独立表的 DataTables？类似于powerTable？
您可以发布任何链接/示例吗？
【问题讨论】：
这是我的 JSFiddle（按“运行”显示图标），它实现了独立的嵌套 jQuery 数据表。 在这种情况下，我只需复制原始表格的 html，并将其发布到详细信息行中，从而省去了制作新表格的麻烦。
这是代码中唯一有趣的部分，它使 NestedTables 与简单的 DrillDown 不同：
else { /* Open this row */
this.src = "http://i.imgur.com/d4ICC.png";
// fnFormatDetails() pieces my Table together, instead you can
// use whatever code you like to create your nested Table html
oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');
// ... and here I cast dataTable() on the newly created nestedTable
oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
iTableCounter = iTableCounter + 1;
}
请注意如何对每个表独立进行过滤、排序等。
【讨论】：
我在 Rafael Cichocki 的优秀 jsfiddle 的基础上添加了动态数据和两个不同的数据表，以强调明细表可以不同于主表这一事实：
http://jsfiddle.net/headwinds/zz3cH/
$('#exampleTable tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
var nTds = this;
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
this.src = "http://i.imgur.com/SD7Dz.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
var rowIndex = oTable.fnGetPosition( $(nTds).closest('tr')[0] );
var detailsRowData = newRowData[rowIndex].details;
this.src = "http://i.imgur.com/d4ICC.png";
oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details');
oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
"bJQueryUI": true,
"bFilter": false,
"aaData": detailsRowData,
"aoColumns": [
{ "mDataProp": "name" },
{ "mDataProp": "team" },
{ "mDataProp": "server" }
],
"bPaginate": false,
"oLanguage": {
"sInfo": "_TOTAL_ entries"
}
});
iTableCounter = iTableCounter + 1;
}
});
【讨论】：
我的嵌套数据表版本来自@Rafael 和@Headwinds，但数据表版本为 1.10.11，带有新的 API。也使用引导程序。两全其美。
$('#opiniondt tbody td.details-control').on('click', 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(iTableCounter) ).show();
tr.addClass('shown');
// try datatable stuff
oInnerTable = $('#opiniondt_' + iTableCounter).dataTable({
data: sections,
autoWidth: true,
deferRender: true,
info: false,
lengthChange: false,
ordering: false,
paging: false,
scrollX: false,
scrollY: false,
searching: false,
columns:[
{ data:'refCount' },
{ data:'section.codeRange.sNumber.sectionNumber' },
{ data:'section.title' }
]
});
iTableCounter = iTableCounter + 1;
}
});
【讨论】：
$('#opiniondt tbody').on('click', 'td.details-control', function (){} 更改为$('#opiniondt tbody td.details-control').on('click', function (){} 来修复它
oInnerTable = $('#opiniondt_' + row[0][0])
我还需要类似的东西，下面是我的示例。可能会帮助某人。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$('tr.tree-toggler').click(function () {
$(this).parent().find('tr').eq(2).find('td.tree').toggle(300);
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="tree-toggler nav-header">
<td>
<table border="1" style="width: 100%">
<tbody>
<tr class="tree-toggler nav-header">
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="nav nav-list tree" style="display: none;">
<table class="table" border="1">
<tbody>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr class="tree-toggler nav-header">
<td>
<table border="1" style="width: 100%">
<tbody>
<tr class="tree-toggler nav-header">
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="nav nav-list tree" style="display: none;">
<table class="table" border="1">
<tbody>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
【讨论】：
这是一个示例（基于上面的 Nicholas），其中子数据表使用 ajax 调用从数据库中获取信息。 注意 BuildBoMDataTable() 构建父表，而 BuildBoMPartsDataTable() 处理每个子表。
var iTableCounter = 1;
var oInnerTable;
var boMDataTable = new Object;
$(document).ready(function () {
BuildBoMDataTable();
AddBomDataTableListener();
});
function AddBomDataTableListener() {
// Add event listener for opening and closing details
$('#boMDataTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = boMDataTable.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Add the html table shell of the datatable.
row.child(formatBomDataTableDetailRow(iTableCounter)).show();
//show the datatable row.
tr.addClass('shown');
// try datatable stuff
BuildBoMPartsDataTable(row.data(), iTableCounter);
iTableCounter = iTableCounter + 1;
}
});
}
function BuildBoMDataTable() {
if ($.isEmptyObject(boMDataTable)) {
boMDataTable = $("#boMDataTable").DataTable({
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
pageLength: 10,
dom: "tip",
pagingType: "simple",
serverSide: true,
autowidth: false,
language: {
emptyTable: "You have no bill of materials associated with your groups and/or projects."
},
ajax: {
url: "/remote/GetParentTableData",
type: "POST",
data: function (d) {
var searchData =
{
personID: $("#PersonID").val(),
selecttype: $("#SelectType").val(),
draw: d.draw,
length: d.length,
start: d.start,
order: d.order,
columns: d.columns,
orderbyfield: d.columns[d.order[0].column].data
};
d.sData = JSON.stringify(searchData);
}
},
columns: [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: '<img class="details-control-mouseover" src="/Content/images/details_transparent_background.png" title="Click to see included parts." alt="Click to see included parts."/>'
},
{ data: "RecordSelector", orderable: false, class: 'dt-center', width: "6%" },
{ data: "Description", width: "25%" },
{ data: "TeamDetails", width: "25%" },
{ data: "CustomerGroupName", width: "13%" },
{ data: "ProjectGroupName", width: "13%" },
{ data: "ClassificationTypeDescription", width: "10%" },
{ data: "AuditDateFormatted", name: "AuditDateFormatted", className: 'dt-center', width: "10%" }
],
order: [[2, "asc"]]
});
}
}
function BuildBoMPartsDataTable(parentObjData, tableCounter) {
oInnerTable = $("#boMPartDataTable_" + tableCounter).DataTable({
autoWidth: true,
dom: "tip",
pagingType: "simple",
serverSide: true,
//processing: true,
autowidth: false,
language: {
emptyTable: "This bill of material contains no part."
},
ajax:
{
url: "/remote/GetChildTableData",
type: "POST",
data: function (d) {
var searchData =
{
bomID: parentObjData.BomID,
draw: d.draw,
length: d.length,
start: d.start,
order: d.order,
columns: d.columns,
orderbyfield: d.columns[d.order[0].column].data
};
d.sData = JSON.stringify(searchData);
}
},
columns: [
{ data: 'RecordSelector' },
{ data: 'PartNumber' },
{ data: 'Quantity' },
{ data: 'UomAbbreviation' },
{ data: 'StatusName' },
{ data: 'PartNotes' },
{ data: 'IsBomDescription' }
]
});
}
function formatBomDataTableDetailRow(table_id) {
return '<div class="table-responsive">' +
' <table id="boMPartDataTable_' + table_id + '" class="table table-striped table-bordered">' +
' <thead>' +
' <tr>' +
' <th></th>' +
' <th title="Click to sort by part number." alt="Click to sort by part number.">PartNumber</th>' +
' <th title="Click to sort by quantity." alt="Click to sort by quantity.">Quantity</th>' +
' <th title="Click to sort by unit of measurement." alt="Click to sort by unit of measurement.">UoM</th>' +
' <th title="Click to sort by status name." alt="Click to sort by status name.">Status Name</th>' +
' <th title="Click to sort by part notes." alt="Click to sort by part notes.">Part Notes</th>' +
' <th title="Click to sort by BoM indicator." alt="Click to sort by BoM indicator.">Is BoM</th>' +
' </tr>' +
' </thead>' +
' <tbody></tbody>' +
' </table>' +
'</div>';
}
【讨论】：
几天前看到这篇文章*： - 似乎该示例有一个“小错误”，发生在“iTableCounter > newRowData.length”时：这意味着表格在鼠标单击时“停止扩展和收缩”。
建议的解决方案：将计数器重置为“0”。 -- 如果有人能够反驳/验证我的建议（因为 JavaScript 不是我的经验语言），我将不胜感激！ ;)
(* 如果我的帖子迟了一年，我深表歉意。但是，鉴于示例说明的强大功能，我希望我会被原谅。)
奥莱·克里斯蒂安·埃克塞斯， NTNU，挪威
【讨论】：