jQuery Data Table - Child data in the same table

on
Source and Demo:

https://codepen.io/pradeep-dani/pen/aYqGYb?editors=0010

view raw final-2.markdown hosted with ❤ by GitHub
<div class="width100 al-container"> <br/>
<table id="intAlerts" class="table table-striped table-bordered width100" />
</div>
view raw index.html hosted with ❤ by GitHub
function dTableCallback() {
$("#intAlerts .shown").each(function() {
console.log("redoing the accordians");
var trIndex = $(this).get(0).rowIndex;
var attrClass = $(this).get(0).childNodes[2].innerText;
var trEl = $("#intAlerts .pChild" + attrClass).get(0);
addRows(trEl, trIndex, attrClass);
});
}
function addRows(trEl, trIndex, attrClass) {
var selText = "#intAlerts ." + attrClass;
$(selText).each(function() {
$(this).closest("tr").remove();
});
var tableEl = document.getElementById("intAlerts");
//row1
if (trEl)
console.log(trEl);
trEl.innerHTML = '<td class="pChild"></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: "Test Test Test",
tooltip: "Report ID"
}, {
title: "Test Test"
}, {
title: "Test Test"
}, {
title: "Test Test"
}, {
title: "Check Test Test"
}, {
title: "CheckTermed"
}, {
title: "Test Test Test Test"
}, {
title: "Test Test"
}, {
title: "Test Test Test Test"
}, {
title: "Test Test"
}],
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>>"
});
/*$("#intAlerts thead th.sorting_desc").each(function() {
console.log('***');
$(this).removeClass("sorting_desc");
});
$("#intAlerts thead th.sorting_asc").each(function() {
console.log('***');
$(this).removeClass("sorting_asc");
});*/
$('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);
var attrClass = tr.get(0).childNodes[2].innerText;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass("shown");
var selText = "#intAlerts ." + attrClass;
$(selText).each(function() {
$(this).closest("tr").remove();
});
} else {
// Open this row
row.child("").show();
tr.addClass("shown");
var trEl = $(this).closest("tr").next();
trEl.addClass("pChild" + attrClass);
dTableCallback();
}
});
});
view raw script.js hosted with ❤ by GitHub
<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>
view raw scripts hosted with ❤ by GitHub
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;
}
view raw style.css hosted with ❤ by GitHub
<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" />
view raw styles hosted with ❤ by GitHub

Comments

Post a Comment