ドリルダウン行とネストされた独立したテーブルで DataTables を使用している人はいますか? パワーテーブルに似ていますか?
リンク/例を投稿できますか?
質問する
53249 次
6 に答える
30
これは、独立したネストされたjQuery DataTablesを実装する私のJSFiddle（アイコンを表示するには「実行」を押してください）です。この場合、新しいテーブルを作成する手間を省くために、元のテーブルの 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;
}
各テーブルで独立してフィルター処理、並べ替えなどを行う方法に注目してください。
于 2012-09-13T15:23:03.053 に答える
21
Rafael Cichocki の優れた jsfiddle の上に動的データと 2 つの異なるデータテーブルを追加して構築し、詳細テーブルがマスター テーブルと異なる可能性があることを強調しました。
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;
}
});
于 2014-03-25T18:48:14.627 に答える
6
@Rafael と @Headwinds のネストされたデータテーブルの私のバージョンですが、新しい API を備えた Datatables バージョン 1.10.11 を使用しています。ブートストラップも使用します。両方のベストを選択します。
ネストされたデータテーブル 1.10.11を参照してください。
$('#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;
}
});
于 2016-03-25T14:59:03.323 に答える
2
これは、子データテーブルが 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>';
}
于 2016-05-02T19:43:10.177 に答える
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>
于 2016-01-21T18:14:47.563 に答える
0
数日前にこの投稿に出くわしました*: -- この例には、「iTableCounter > newRowData.length」の場合に発生する「小さなバグ」があるようです: これは、マウス クリックでテーブルが「拡大と縮小を停止する」ことを意味します。
推奨される解決策: カウンターを「0」にリセットします。-- 誰かが私の提案に反論/検証できるなら (JavaScript は私の経験上言語ではないため)、私はとても感謝しています! ;)
(* 投稿が 1 年遅れてしまったことをお詫びします。ただし、この例が示している優れた機能を考えると、ご容赦ください。)
Ole Kristian Ekseth、NTNU、ノルウェー
于 2015-08-25T22:49:12.727 に答える