Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements....
The provided CSS currently displays the icon on every row throughout the entire table.
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
Is there a way to style only the initial (or potentially middle) row within each group to feature the child row icon?
Your assistance is greatly appreciated!
UPDATE: Initialization of Datatables for a basic structure demonstration..
$(document).ready(function ()
{
$('#myDataTable thead tr#filterrow th').each(function () {
var title = $('#myDataTable thead th').eq($(this).index()).text();
$(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search ' + title + '""style="direction: ltr; text-align:left;" />');
});
$("#myDataTable thead input").on('keyup change', function () {
table
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
var table = $('#myDataTable').DataTable({
//"scrollY": "200",
"scroller": "true",
"deferRender": "true",
"orderCellsTop": "true",
"columnDefs":
[
{ "visible": false, "targets": 1 },
{
"className": 'details-control', "targets": 0
},
{
"orderable": false, "targets": 0
}
],
"order": [[1, 'asc']],
"displayLength": 100,
"drawCallback": function (settings)
{
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(1, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group"><td colspan="91">' + group + '</td></tr>'
);
last = group;
}
});
}
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.header()).on('keyup change', function () {
that
.search(this.value)
.draw();
});
});
// Order by the grouping
$('#myDataTable tbody').on('click', 'tr.group', function () {
var currentOrder = table.order()[0];
if (currentOrder[0] === 1 && currentOrder[1] === 'asc') {
table.order([1, 'desc']).draw();
}
else {
table.order([1, 'asc']).draw();
}
});
$('#myDataTable').dataTable().makeEditable(
{
"aoColumns":
[.........]
});
// Add event listener for opening and closing details
$('#myDataTable tbody').on('click', 'td.details-control', function () {
console.log(table.row(this).data());
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(row.data())).show();
tr.addClass('shown');
}
});
});