Large HTML tables with fixed first column and header
10 May 2013
Here is the process I followed to get the stated goal:
- Download the latest datatables from here and place them in your site root.
- I deleted all of the extraneous examples included in the package, this is probably wise.
- Additionally you will need the FixedHeader plugin for datatables to achieve the split effect. Alternatively, if you are just freezing the first column you could download the FixedColumn plugin. FH satisfies both, so I found it to be the better option.
- Attach Jquery to your large-tabled webpage. You could use the latest version or the one included with datatables.
- Attach the datatables and FixedHeader scripts relatively to where you downloaded them in your site root.
A few key points here. “#example” is the id of your table. The “aoColumns” sets properties of specific columns. If you are modifying individual columns, all columns have to have an entry. So make sure that if you want to leave it as default, you change it to null. If you do not have an entry for each column here, your table will break and degrade to standard HTML (frustrating). The final line that defines new FixedHeader is where you set what column and rows are fixed. You can set all four, but in this example only the left is frozen (“left”: true).
After this point, it is just a matter of formatting your HTML and styling CSS to taste.