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 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.
01 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 :)
