Nested Datatables 1.10.11
Nested Datatables version 1.10.11.
by survivant
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="content">
<div class="columns-1" id="main-content" role="main">
<div class="portlet-layout row-fluid">
<div class="portlet-column portlet-column-only span12" id="column-1">
<div class="portlet-dropzone portlet-column-content portlet-column-content-only" id="layout-column_column-1">
<div class="portlet-boundary portlet-boundary_flapv3Portlet_WAR_flapui_ " id="p_p_id_flapv3Portlet_WAR_flapui_" >
<span id="p_flapv3Portlet_WAR_flapui"></span>
<section class="portlet" id="portlet_flapv3Portlet_WAR_flapui">
<div class="portlet-content">
<div class=" portlet-content-container" style="">
<div class="portlet-body">
<table width="100%">
<tbody><tr>
<td>
<!-- AJAX -->
<div id="button_refresh" class="refreshIcon"></div>
<div id="interval_selection" class="interval_selection">
<input type="radio" name="interval" value="DAY" checked="checked">Aujourd'hui
<input type="radio" name="interval" value="WEEK">Une semaine
<input type="radio" name="interval" value="TWO_MONTH">Deux semaines
<input type="radio" name="interval" value="MONTH">1 mois
<input type="radio" name="interval" value="TWO_MONTH">2 mois
<input type="radio" name="interval" value="THREE_MONTH">3 mois
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr class="ui-state-default">
<th rowspan="3">ID</th>
<th rowspan="3">Date</th>
<th colspan="12">US</th>
<th colspan="16">DS</th>
...
CSS
td.details-control {
background: url('https://i.imgur.com/SD7Dz.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://i.imgur.com/SD7Dz.png') no-repeat center center;
}
JavaScript
var ajaxUrl = '/echo/js/?js={"draw":null,"recordsTotal":null,"recordsFiltered":null,"summaryData":{"modemMac":"mac","modemModel":"model","modemDocsisVersion":null,"modemType":"Residentiel","modemInstallationDate":"2000-12-31","addressNoCiv":"65","addressStreet":"rue","addressApp":"-","addressCity":"city","networkCmts":"AE2","networkNode":"AE-01H","networkAmp":"AE01-L-13","networkPAmp":"AE01-D-17","interfaceInterface":"Mo7/1/2:0","interfaceUpstream":"U2","interfaceUpstreamFrequency":"18.0 (qpsk)","interfaceDownstreamFrequency":"357.0 (256qam)"},"data":[["0","Thu Oct 06 10:57:28 EDT 2016","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx"],["1","Thu Oct 06 10:57:28 EDT 2016","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx"],["2","Thu Oct 06 10:57:28 EDT 2016","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx"],["3","Thu Oct 06 10:57:28 EDT 2016","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx"],["4","Thu Oct 06 10:57:28 EDT 2016","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx"],["5","Thu Oct 06 10:57:28 EDT 2016","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","RxPwr","UsMer","Tx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx","DsMer","Rx"],["6","Thu Oct 06 10:57:28 EDT...