Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save pradeep-dani/4b556e89c9ec38df20ed2011079c5e54 to your computer and use it in GitHub Desktop.
Save pradeep-dani/4b556e89c9ec38df20ed2011079c5e54 to your computer and use it in GitHub Desktop.
Final - Child Rows in same table
<div class="width100 al-container"> <br/>
<table id="intAlerts" class="table table-striped table-bordered width100" />
</div>
function dTableCallback() {
$("#intAlerts .shown").each(function() {
console.log("redoing the accordians");
var trEl = $(this).next().get(0);
var trIndex = $(this).get(0).rowIndex;
var attrClass = $(this).get(0).childNodes[2].innerText;
addRows(trEl, trIndex, attrClass);
});
}
function addRows(trEl, trIndex, attrClass) {
var selText = "#intAlerts ." + attrClass;
$(selText).each(function() {
$(this).closest("tr").hide();
});
var tableEl = document.getElementById("intAlerts");
//row1
if (trEl)
trEl.innerHTML = '<td class=""></td><td class="sorting_1">Test</td><td>Remnder 100</td><td>Y</td><td>Y</td><td>N</td><td>N</td><td>-</td><td>Test</td><td>-</td><td>9/22/2016 3:15PM</td>';
//row2
var addRowEl = tableEl.insertRow(trIndex + 1);
addRowEl.innerHTML = '<td class="' + attrClass + '"></td><td class="sorting_1">Test</td><td>Remnder 102</td><td>Y</td><td>Y</td><td>N</td><td>N</td><td>-</td><td>Test</td><td>-</td><td>9/22/2016 3:15PM</td>';
//row3
addRowEl = tableEl.insertRow(trIndex + 1);
addRowEl.innerHTML = '<td class="' + attrClass + '"></td><td class="sorting_1">Test</td><td>Remnder 103</td><td>Y</td><td>Y</td><td>N</td><td>N</td><td>-</td><td>Test</td><td>-</td><td>9/22/2016 3:15PM</td>';
//row4
addRowEl = tableEl.insertRow(trIndex + 1);
addRowEl.innerHTML = '<td class="' + attrClass + '"></td><td class="sorting_1">Test</td><td>Remnder 104</td><td>Y</td><td>Y</td><td>N</td><td>N</td><td>-</td><td>Test</td><td>-</td><td>9/22/2016 3:15PM</td>';
}
$(document).ready(function() {
var dataSet = [["", "Test", "Remnder1", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder2", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder3", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder4", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder5", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder6", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder7", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder8", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder9", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder10", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder11", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder12", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder13", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder14", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder15", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder16", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder17", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder18", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder19", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder20", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder21", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder22", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"], ["", "Test", "Remnder23", "Y", "Y", "N", "N", "-", "Test", "-", "9/22/2016 3:15PM"]];
$("#intAlerts").DataTable({
data: dataSet,
columns: [{
className: "details-control",
data: null,
defaultContent: "",
width: "3%"
}, {
title: "Check Name",
tooltip: "Report ID"
}, {
title: "CheckName"
}, {
title: "CheckCheck Check"
}, {
title: "Check Check"
}, {
title: "Check Not "
}, {
title: "Check"
}, {
title: "Check Check Check"
}, {
title: "Check"
}, {
title: "Date/Time Check"
}, {
title: "Date/Time Check Check"
}],
headerCallback: function(thead, data, start, end, display) {
$(thead).find("th").eq(1).html("Displaying <br/> records");
},
columnDefs: [{
targets: [0],
searchable: false,
orderable: false,
visible: true
}],
order: [[1, "asc"]],
pagingType: "full_numbers",
pageLength: 10,
initComplete: function(settings, json) {
var api = new $.fn.dataTable.Api(settings);
api.columns([4, 5]).visible(true);
},
dom: "<<'left'l><'right'p>><'width100't><<'left'i><'right'p>>"
});
$('select[name="intAlerts_length"]').change(function() {
console.log("Show Entries change");
dTableCallback();
});
$(".dataTables_paginate").click(function() {
console.log("Pagination");
dTableCallback();
});
$("#intAlerts thead").click(function() {
console.log("Pagination");
dTableCallback();
});
// Add event listener for opening and closing details
$("#intAlerts").on("click", "td.details-control", function() {
var intAlertsTable = $("#intAlerts").DataTable();
var tr = $(this).closest("tr");
var row = intAlertsTable.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass("shown");
var attrClass = tr.get(0).childNodes[2].innerText;
var selText = "#intAlerts ." + attrClass;
$(selText).each(function() {
$(this).closest("tr").hide();
});
} else {
// Open this row
row.child("").show();
tr.addClass("shown");
dTableCallback();
}
});
});
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
td.details-control {
background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}
.left {
float: left;
display: inline;
}
.right {
float: right;
display: inline;
}
.width100 {
width:100%!IMPORTANT;
}
.row-bordered {
border-bottom: 1px solid #ddd;
padding-bottom: 4px;
padding-top: 4px;
margin-left: 2px;
width:100%!IMPORTANT;
}
.al-container{
font-size: 11px!IMPORTANT;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment