Menu
Between <head> tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.1/css/fixedColumns.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
Script:
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
leftColumns: 2
}
} );
} );
</script>
Table (it has more than 2 rows):
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
CSS:
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
Table is working but table has no fixed columns. FixedColumns part is not working.
449
Editor's inline editing mode also supports the FixedColumns extension for DataTables. FixedColumns allows one or more columns to be frozen in place at the edges of a scrolling table, while still remaining inline editable, as shown in this example.
The DataTables installation manual also has details on how to use package managers with DataTables. FixedColumns is initialised using the fixedColumns option in the DataTables constructor - a simple boolean true will enable the feature. Further options can be specified using this option as an object - see the documentation for details.
Oddly, even with the ' fixedColumns: true' it seems that the fixed column width is in fact working. Which leads me to wonder about the purpose of the fixedColums setting though? Any ideas?
new: Rewrite of Fixed Columns to make use of the position sticky css … When making use of DataTables' horizontal scrolling feature ( scrollX ), you may wish to fix the left or right most columns in place.
The issue is the libraries are not in right order. Your scripts etc should be like this:
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
So basically you just need to make sure to load the main datatables js file before fixedcolumns :)
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
