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
1-Basic example
The following is an example of a very simple Fixed Header Table:
Table 1
Let us have a look how the table works:
- The table
- 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.
All the above requirements are implemented in a statement like:
<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:
- scrollableFixedHeaderTable.css
- jquery-1.4.2.min.js
- jquery.cookie.pack.js
- jquery-dimensions.min.js
- jquery.scrollableFixedHeaderTable.js
- jquery-list-attributes.js
- The page must define a JQuery function as follow:
<script type="text/javascript">
$(document).ready(function(){
$("#tableID").scrollableFixedHeaderTable(width,height,null,null,n);
});
</script>
where
- tableID is the ID assigned to the table (myTable1 in this case)
- width is the number of pixels assigned as width of the table
- height is the number of pixels assigned as height of the table
- n is the number of the header rows to be kept as steady.
It should be noted that the width and the height are comprehensive of the size of the vertical and of the horizontal scroll bars,
should they need to be there. Particular attention should be payed to the width parameter:
- If the width is much greater than the original width of the table (when it is fully visible) the vertical bar show up at some distance from the right edge of the table.
- If the width is less than the original width of the table , then the vertical bar goes inside the table.
2-Column selection
A feature included in this plugin allows the user to select the columns to be made visible.
The user presses the blue arrow at the top of the table to select the desired columns.
This feature works correctly only if there is a single head row.
Column selection can be achieved in one of two ways:
Column temporary 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.
Example:
<script type="text/javascript">
$(document).ready(function(){
$("#mytable2a").scrollableFixedHeaderTable(650,100,'true',null,1);
});
</script>
Table 2a
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.
Example:
<script type="text/javascript>
$(document).ready(function(){
$("#mytable2b").scrollableFixedHeaderTable(650,100,'true','jacob',1);
});
</script>
Table 2b
|