DataTables fixedColumns Part Is Not Working
Between Tags: Script: $(Document). Ready(Function() { Var Table = $('#Example'). Datatable( { scrollY: "300Px", scrollX: True, scrollCollapse: True, Paging...
Between <head> tags:
<script src=""></script>
<link rel="stylesheet" type="text/css" href=""/>
<link rel="stylesheet" type="text/css" href=""/>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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.
1 Answer
The issue is the libraries are not in right order. Your scripts etc should be like this:
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
So basically you just need to make sure to load the main datatables js file before fixedcolumns :)
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
