Fixed Header Tables: Bulanadi's Plugin
In this page we want to share our findings and opinions about Jerome Bulanadi's Scrollable Fixed Header Plugin.
We invite every one to check out Jerome's blog
and to make up a personal opinion.
Jerome's plugin not only provides fixed header support, but optionally allows the user to display only some selected columns, which is a great advantage when dealing with a large number of columns.
This page contains some examples of Fixed Header Tables. Detail explanations are provided here for each case:
- Basic example
- Columns selection
- Temporary columns selection
- Permanent columns selection
The following is an example of a very simple Fixed Header Table:
Let us have a look how the table works:
- The table
All the above requirements are implemented in a statement like:
- The table MUST have a CSS class. In this case the CSS class is defined as myTable1 in a style sheet at the top of this page (use the right mouse to display the source of this page).
The most important thing is that the table header rows MUST have a background color. A background color in the headers is mandatory in order to remove their transparency,
otherwise you would see rows moving under the covers (the header rows) when the table is scrolled.
- The table must also reference the plugin CSS class scrollableFixedHeaderTable
- The table must have an ID.
<table class="myTable1 scrollableFixedHeaderTable" id="myTable1" ... >
- Links to the plugin
The page must define six links to the plugin. The links are defined at the top of this page (use the right mouse to display the source of this page) and refer to the following objects:
- The page must define a JQuery function as follow:
|Virtual Save and Transfer
||Sep 28, 2011|
||Basic approach for using Ajax
||Jul 13, 2011|
||Pick Dates from a Calendar (based on jquery)
||Dec 27, 2011|
||Fix Header Tables (based on jquery)
||Dec 27, 2011|
Column permanent selection
Columns selected are reset every time the page is reloaded. You implement this by specifying 'true' as the third parameter of JQuery function scrollableFixedHeaderTable,
AND specifying a 'name' as the fourth parameter. This is going to be the name of a cookie used to save the selection made by the user.
If you use this technique for more than a table in a page, you must specify different cookie names.