Кто-нибудь использует DataTables со строками детализации и вложенной независимой таблицей? Похоже на PowerTable?
Можете ли вы опубликовать какие-либо ссылки/примеры?
Datatables — детализировать строки с вложенной независимой таблицей
comment
Если на ваш вопрос есть ответ, пожалуйста, отметьте ответ как таковой.
- person Rafael Emshoff schedule 04.07.2013
comment
это последний официальный образец - datatables.net/blog/2014-10-02 @ пользователь1339164
- person ajahongir schedule 07.04.2015
comment
Для этой цели есть nested-datatables.
- person Matt schedule 20.04.2018
Ответы (6)
Вот мой 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;
}
Обратите внимание, как вы можете фильтровать, сортировать и т. д. для каждой таблицы независимо.
person
Rafael Emshoff
schedule
13.09.2012
Я построил на основе отличного jsfiddle Rafael Cichocki, добавив динамические данные и две разные таблицы данных, чтобы подчеркнуть тот факт, что подробная таблица может отличаться от основной таблицы:
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;
}
});
person
headwinds
schedule
25.03.2014
Превосходно !! То, что я искал по всему интернету. Спасибо
- person Ramez Ashraf; 16.04.2014
@headwinds Есть ли у вас какие-либо идеи о том, , как создать детализацию jQuery Datatable? строк? Заранее спасибо...
- person Jack; 12.10.2016
@ClintEastwood Я бегло просмотрел вашу ветку - кажется, вы получаете отличную помощь ;-D Я бы посоветовал вам попытаться создать скрипку или кодовую ручку, а затем поделиться своим экспериментом, даже если он немного сломан.
- person headwinds; 13.10.2016
@headwinds Я получил помощь после того, как попросил вас о помощи :) Большое спасибо ...
- person Jack; 16.10.2016
@Клинт Иствуд здорово! вам следует рассмотреть возможность добавления вашего примера (codepen или fiddle) в этот поток, чтобы помочь следующему парню
- person headwinds; 21.10.2016
@headwinds Вы правы, но я уже давал ссылку на этот выпуск в своих предыдущих комментариях. Любой, кому нужна помощь, может воспользоваться ею. С Уважением...
- person Jack; 24.10.2016
Моя версия вложенных таблиц данных от @Rafael и @Headwinds, но с версией данных 1.10.11 с новым API. Также использует бутстрап. Выбирает лучшее из обоих.
См. Вложенные таблицы данных 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;
}
});
person
K.Nicholas
schedule
25.03.2016
Спасибо, Николай, ваш пример был именно тем, что мне было нужно. Я ценю, что вы обновили этот вопрос своим кодом.
- person AlbChu; 29.03.2016
@Nicholas У вас есть какие-либо идеи о том, как создать jQuery Datatable Drill-down? строки?. Заранее спасибо...
- person Jack; 12.10.2016
Когда я реализовал это, возникла проблема с двойным запуском этого события (переключение между открытием и закрытием) после перехода на другую страницу моего основного набора результатов. Я исправил это, изменив
$('#opiniondt tbody').on('click', 'td.details-control', function (){} на $('#opiniondt tbody td.details-control').on('click', function (){}
- person kevinpo; 19.06.2017
Кроме того, вам не нужен iTableCounter, если вы используете rowIndex.
oInnerTable = $('#opiniondt_' + row[0][0])
- person kevinpo; 19.06.2017
Ваш пример просто работает как шарм, но у меня есть небольшой вопрос, как я могу получить данные строки из внутренней таблицы?
- person Bilal Zafar; 25.04.2018
Если вы используете плагин «кнопки» и экспортируете свою таблицу данных с вложенными таблицами, экспортируются ли вложенные таблицы?
- person Ethan; 25.04.2018
Мне тоже нужно было что-то похожее на это, и ниже пример того, как я это сделал. Может поможет кому.
<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>
person
Rohit
schedule
21.01.2016
Вот пример (на основе Николая выше), где дочерний datatable использует вызов 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>';
}
person
ScottLenart
schedule
02.05.2016
Наткнулся на этот пост несколько дней назад *: - похоже, что в примере есть «незначительная ошибка», возникающая, когда «iTableCounter > newRowData.length»: подразумевается, что таблица «перестает расширяться и сжиматься» при щелчках мыши.
Предлагаемое решение: сброс счетчика на «0». -- если кто-нибудь сможет опровергнуть/подтвердить мои предложения (поскольку JavaScript не является языком моего опыта), я был бы более чем благодарен! ;)
(* Если мой пост опоздал на год, я извиняюсь. Однако, учитывая большую функциональность, которую иллюстрирует пример, я надеюсь, что меня простят.)
Оле Кристиан Эксет, NTNU, Норвегия
person
Ole Kristian Ekseth
schedule
25.08.2015
