DataTables with FixedColumns
HTML
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://datatables.net/release-datatables/media/js/dataTables.bootstrap4.js"></script>
<script src="https://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/media/css/dataTables.bootstrap4.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/FixedColumns/css/fixedColumns.bootstrap4.css">
<!-- https://datatables.net/release-datatables/extensions/FixedColumns/examples/styling/bootstrap4.html -->
<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th colspan="2"></th>
<th colspan="2">
Name
</th>
<th colspan="2">
Working as
</th>
<th colspan="5">
Details
</th>
</tr>
<tr>
<th colspan="1"></th>
<th colspan="1">Sticky thing</th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>foo</td>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>2</td>
<td>foo</td>
<td>Garrett</td>
...
JavaScript
$(document).ready(function() {
var table = $('#example').DataTable( {
paging: false,
"dom": "Zt",
"searching": false,
"info": false,
"autoWidth": false,
"colResize": {
"exclude": [
0
],
"tableWidthFixed": false
},
"deferRender": true,
"language": {
"emptyTable": "Für diese Tabelle sind keine Daten verfügbar",
"zeroRecords": "",
"loadingRecords": "",
"aria": {
"sortAscending": "Spalte aufsteigend sortieren",
"sortDescending": "Spalte absteigend sortieren"
}
},
"order": [],
"scroller": {
"loadingIndicator": true
},
"scrollY": 300,
"scrollX": true,
"fixedColumns": {
"leftColumns": 2
},
} );
} );