Get started with datatables.net-rowgroup-bs4 CDN
MIT licensed
Datatables.net-rowgroup-bs4: Plugin adds Bootstrap 4 row grouping to Datatables.net.
Tags:- row grouping
- DataTables
- jQuery
- table
- Bootstrap 4
Stable version
Copied!
How to start using datatables.net-rowgroup-bs4 CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with datatables.net-rowgroup-bs4 CDN - cdnhub.io</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.5.0/css/rowGroup.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.5.0/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.5.0/js/dataTables.rowGroup.bootstrap4.min.js"></script>
</head>
<body>
<div class="container mt-5">
<table id="example" class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody id="data">
<tr data-group="group1">
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr data-group="group1">
<td>Jane Doe</td>
<td>28</td>
<td>Los Angeles</td>
</tr>
<tr data-group="group2">
<td>Mike Smith</td>
<td>45</td>
<td>Chicago</td>
</tr>
<tr data-group="group2">
<td>Sarah Johnson</td>
<td>35</td>
<td>Miami</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable({
rowGroup: {
dataSrc: '#data tbody tr', // specify the table and tbody
colDefs: [
{ classes: { 'row-group': 'data-row' }, targets: '_all' }, // apply the 'data-row' class to all cells
{ orderData: [1, 0], targets: '_all' } // sort by age, then name
],
groupClasses: {
group: 'group', // custom group class
group_start: 'group-start', // custom group start class
group_end: 'group-end' // custom group end class
}
}
});
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!