DataTables childs

DataTables childs

by MaartenB

HTML

<link rel="stylesheet" href="https://nightly.datatables.net/css/jquery.dataTables.min.css">
<script src="https://nightly.datatables.net/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://nightly.datatables.net/responsive/css/responsive.dataTables.min.css">
<script src="https://nightly.datatables.net/responsive/js/dataTables.responsive.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th class="control-all"></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th class="none">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td></td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td></td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
    </tbody>
</table>

CSS

table.dataTable.dtr-column > thead > tr > th.control-all {
    position: relative;
    cursor: pointer;
}

table.dataTable.dtr-column > thead > tr > th.control-all:before {
  top: 50%;
  left: 50%;
  height: 16px;
  width: 16px;
  margin-top: -10px;
  margin-left: -10px;
  display: block;
  position: absolute;
  color: white;
  border: 2px solid white;
  border-radius: 16px;
  box-shadow: 0 0 3px #444;
  box-sizing: content-box;
  text-align: left;
  font-family: 'Courier New', Courier, monospace;
  text-indent: 4px;
  line-height: 16px;
  content: '+';
  background-color: #31b131;
}

table.dataTable.dtr-column > thead > tr th.control-all-expanded:before {
  content: '-';
  background-color: #d33333;
}

JavaScript

var table = $('#example').DataTable( {
    responsive: {
        details: {
            type: 'column',
            target: 0,
        }
    },
    columnDefs: [ {
        targets:   0,
        className: 'control',
        orderable: false,
        searchable: false,
    }],
    order: [ 1, 'asc' ],
} );


table.on('click', 'thead .control-all', function() {
    var allExpanded;

    if ($(this).hasClass("control-all-expanded")) {
        allExpanded = true;
        $(this).removeClass("control-all-expanded");
    } else {
        allExpanded = false;
        $(this).addClass("control-all-expanded");
    }


    table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
        if (this.child.isShown()) {
	    if (allExpanded) {
                this.child.hide();
                $(this.node()).removeClass('parent');
	    }
        } else {
	    if (!allExpanded) {
                this.child.show();
               $(this.node()).addClass('parent');
	    }
        }
    });
});

table.on('click', 'td.control', function () {
    var allExpanded;

    if ( $(this).hasClass("control-all-expanded") ) {
        allExpanded = true;
    } else {
        allExpanded = false;
    }

    var tr = $(this).closest('tr');
    var row = table.row( tr );
 
    if ( row.child.isShown() ) {
        var countRows = table.rows().count();
        var countRowsExpanded = table.rows('.parent').count();

        if (countRows > 0) {
	    if (countRowsExpanded == countRows) {
                $('thead .control-all', table.table().container()).addClass("control-all-expanded");
	    }
        }
    }
    else {
	if (allExpanded) {
            $('thead .control-all', table.table().container()).removeClass("control-all-expanded");
	}
    }
});