jquery-datatables - enumerar - row details datatables bootstrap
Datos-Datos detallados de filas con tabla independiente anidada (6)
Aquí está mi JSFiddle ( presione "Ejecutar" para que aparezcan los íconos ) que implementa jQuery DataTables anidadas independientes. En este caso, solo copio el html de la tabla original y lo publico en la fila de detalles, para evitar la molestia de hacer una nueva tabla.
Esta es la única parte interesante del código que hace que las tablas de Nested sean diferentes de las de 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;
}
Observe cómo puede filtrar, ordenar, etc. en cada tabla de forma independiente.
¿Alguien está utilizando DataTables con filas detalladas y una tabla independiente anidada? Similar a powerTable?
¿Puedes publicar algún enlace / ejemplo?
Aquí hay un ejemplo (basado en el de Nicholas arriba) donde el objeto de datos hijo utiliza una llamada ajax para obtener información de la base de datos. Nota BuildBoMDataTable () construye la tabla principal, mientras que BuildBoMPartsDataTable () maneja cada tabla secundaria.
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>'';
}
Construí sobre el excelente jsfiddle de Rafael Cichocki agregando datos dinámicos y dos datos diferentes para enfatizar que el hecho de que la tabla de detalles puede ser diferente de la tabla maestra:
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;
}
});
Llegué a esta publicación hace algunos días *: parece que el ejemplo tiene un ''error menor'', que se produce cuando "iTableCounter> newRowData.length": la implicación es que la tabla ''deja de expandirse y contraerse'' con los clics del mouse.
Solución sugerida: restablecer el contador a ''0''. - Si alguien pudiera refutar / verificar mis sugerencias (ya que JavaScript no es mi idioma de experiencia), ¡estaría más que agradecido! ;)
(* Si mi publicación es un año demasiado tarde, me disculpo. Sin embargo, dada la gran funcionalidad que ilustra el ejemplo, espero que se me perdone).
Ole Kristian Ekseth, NTNU, Noruega
Mi versión de las bases de datos anidadas de @Rafael y @Headwinds pero con la versión 1.10.11 de Datatables con nueva API. También utiliza bootstrap. Escoge lo mejor de ambos.
Ver datos anidados 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;
}
});
También necesitaba algo similar a esto, y debajo de una muestra de cómo lo hice. Podría ayudar a alguien.
<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>