jQuery DataTables: How to expand/collapse all child rows - Regular table
Example for article at https://www.gyrocode.com/articles/jquery-datatables-how-to-expand-collapse-all-child-rows/
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<table id="example1" class="cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
</table>
<table id="example2" class="cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
</table>
JavaScript
$(document).ready(function() {
example1Table();
example2Table();
});
function example1Table() {
var office = 'London';
var example1 = $('#example1').DataTable({
'ajax': 'https://api.myjson.com/bins/16lp6',
'data': {
office : office
},
'columns': [{
'data': 'name'
},
{
'data': 'position'
},
{
'data': 'office'
},
{
'data': 'salary'
}
],
pageLength: 5
});
example1.on('init', function() {
example1.column(2).search(office).draw();
})
}
function example2Table() {
var office = 'San Francisco';
var example2 = $('#example2').DataTable({
'ajax': 'https://api.myjson.com/bins/16lp6',
'data': {
office : office
},
'columns': [{
'data': 'name'
},
{
'data': 'position'
},
{
'data': 'office'
},
{
'data': 'salary'
}
],
pageLength: 5
});
example2.on('init', function() {
example2.column(2).search(office).draw();
})
}