Child Rows in same JQ data-table

final-2.markdown

Child Rows in same JQ data-table

A Pen by Pradeepkumar Dani on CodePen.

License.

index.html

<div class="width100 al-container"> <br/>
  <table id="intAlerts" class="table table-striped table-bordered width100" />
</div>

script.js

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();
        }
    });
});

scripts

<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>

style.css

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;
}

styles

<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" />