是否有人使用DataTables向下钻取行和嵌套的独立表？与powerTable相似？
您可以发布任何链接/示例吗？
答案 0 :(得分：28)
这是我的 JSFiddle （按“运行”显示的图标），它实现了独立的嵌套jQuery DataTables。 在这种情况下，我只是复制原始表的html，并将其发布到Details行中，以免我制作新表的麻烦。
这是代码中唯一有趣的部分，它使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;
}
注意如何独立地对每个表进行过滤，排序等。
答案 1 :(得分：20)
我建立在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;
}
});
答案 2 :(得分：6)
我的@Rafael和@Headwinds的嵌套数据表版本，但带有新API的Datatables版本1.10.11。也使用bootstrap。两者都是最好的。
请参阅Nested Datatables 1.10.11 。
.答案 3 :(得分：2)
我还需要类似于此的内容，并在示例下方进行操作。可以帮助别人。
<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>
答案 4 :(得分：2)
这是一个示例（基于Nicholas＆＃39;上面），其中子数据表使用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>';
}
答案 5 :(得分：0)
几天前看过这篇文章*： - 看起来这个例子有一个“小错误”，发生在“iTableCounter＆gt; newRowData.length”时：意味着该表在鼠标点击时“停止扩展和收缩”。
建议的解决方案：将计数器重置为“0”。 - 如果有人能够反驳/验证我的建议（因为JavaScript不是我的经验语言），我将不胜感激！ ;）
（*如果我的帖子是一年太晚，我道歉。但是，鉴于该示例所示的强大功能，我希望我会被原谅。）
Ole Kristian Ekseth， NTNU，挪威