Datatables - Exploration des lignes avec la table indépendante imbriquée
Quelqu'un utilise-t-il DataTables avec des lignes d’extraction et une table indépendante imbriquée? Similaire à powerTable?
Pouvez-vous poster des liens/exemples?
Voici mon JSFiddle (appuyez sur "Exécuter" pour afficher les icônes) qui implémente des données indépendantes jQuery DataTables . Dans ce cas, je copie simplement le code HTML de la table d'origine, et postez-le dans la rangée Détails, pour éviter les tracas liés à la création d'une nouvelle table.
Voici la seule partie intéressante du code qui différencie les tables Nested du DrillDown simple:
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;
}
Remarquez comment vous pouvez filtrer, trier, etc. sur chaque table indépendamment.
J'ai bâti sur l'excellent jsfiddle de Rafael Cichocki en ajoutant des données dynamiques et deux tables de données différentes pour souligner le fait que la table de détails peut être différente de la table principale:
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;
}
});
Ma version des tables de données imbriquées de @Rafael et @Headwinds mais avec la version de Datatables 1.10.11 avec une nouvelle API. Utilise également le bootstrap. Choix meilleur des deux.
Voir Datatables imbriqués 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;
}
});
J'avais aussi besoin de quelque chose de similaire à cela, et ci-dessous un exemple de ce que j'ai fait. Peut aider quelqu'un.
<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>
Voici un exemple (basé sur Nicholas 'ci-dessus) où l'enfant datatable utilise un appel ajax pour extraire des informations de la base de données . Remarque BuildBoMDataTable () génère la table parent, tandis que BuildBoMPartsDataTable () gère chaque table enfant.
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>';
}
Je suis tombé sur ce message il y a quelques jours *: -- semble donner à l'exemple un "bogue mineur", qui survient lorsque "iTableCounter> newRowData.length": l'implication est que la table "cesse de se développer et se contracte" à la souris. clics.
Solution suggérée: réinitialiser le compteur à '0' .-- si quelqu'un était en mesure de réfuter/vérifier mes suggestions (car JavaScript n'est pas mon langage d'expérience), je vous en serais plus que reconnaissant! ;)
(* Si mon article arrive un an trop tard, je vous présente mes excuses. Cependant, étant donné la grande fonctionnalité illustrée par l'exemple, j'espère que je serai pardonné.)
Ole Kristian Ekseth, NTNU, Norvège