3-level drill down datatable
HTML
<!doctype html>
<head>
<meta charset="utf-8">
<!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Data Table-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src=" https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script type="text/javascript" src=" https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<!-- Bootstrap-->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
<!-- table table-striped dataTable -->
<table id="example" class="table table-striped">
<thead><tr></tr></thead>
</table>
</div> <!-- class=col-8-->
</body>
CSS
td.details-control {
background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
JavaScript
function setupData() {
function format_level1(d, table_id) {
var columns_level1 = [];
columns_level1[0] = ({
"className": 'details-control',
"data": null,
"defaultContent": ''
});
columns_level1[1] = ({
data: 'a_level1',
title: 'a_level1'
});
data_level1 = [{
'a_level1': '2'
}, {
'a_level1': '3'
}];
return {
thetable: '<table class="table table-striped" id="example_' + table_id + '">' +
'<thead><tr></tr></thead>' +
'</table>',
thecolumns: columns_level1,
thedata: data_level1
};
}; //format_level1
function format_level2(d, table_id) {
var columns_level2 = [];
columns_level2[0] = ({
"className": 'details-control',
"data": null,
"defaultContent": ''
});
columns_level2[1] = ({
data: 'a_level2',
title: 'a_level2'
});
data_level2 = [{
'a_level2': '4'
}, {
'a_level2': '5'
}];
return {
thelev2table: '<table class="table table-striped" id="example_lev2_' + table_id + '">' +
'<thead><tr></tr></thead>' +
'</table>',
thelev2columns: columns_level2,
thelev2data: data_level2
};
}; //format_level2
///////
var iTableCounter = 1;
var iTableCounterLev2 = 1;
var oInnerTable;
var columns_level0 = [];
columns_level0[0] = ({
"className": 'details-control',
"data": null,
"defaultContent": ''
});
columns_level0[1] = ({
data: 'a_level0',
title: 'a_level0'
});
data_level0 = [{
'a_level0': '0'
}, {
'a_level0': '1'
}];
console.log(data_level0);
var table = $('#example').DataTable({
...