Skip to main content  
  Easy400   |       iSeries home
Freeware
 
 
About it
Boulanadi's Plugin
DataTables Plugin
 
Download

 
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:

  1. Basic example
  2. Columns selection
    1. Temporary columns selection
    2. Permanent columns selection

1-Basic example

The following is an example of a very simple Fixed Header Table:

Table 1
Easy400.net utilities
# Name Description Release
date
1 CGIDEV2 ILE-RPG CGI development kit Jan 13, 2012
2 CGICBLDEV2 ILE-COBOL CGI Development Kit Jan 19, 2012
3 CENTAUR2 E-commerce CGI Centaur Demo Feb 03, 2011
4 JS2 JavaScript Tutorial Feb 06, 2011
5 WRKVLDL Work with Validation Lists Feb 06, 2011
6 LOGINOUT Web Session Login/Logout Manager Nov 22, 2011
7 SECTCP Triple A Secured TCP Utility Nov 24, 2011
8 WSECTCP Triple A Secured TCP Utility - WEB user Interface Nov 24, 2011
9 EZPACK3 Library Compressor Utility Sep 09, 2010
10 WEBACT iSeries WEB Access Toolkit Aug 06, 2010
11 MMAIL iSeries MIME & Mail Jan 18, 2012
12 POP3READ iSeries POP3 Client Dec 16, 2011
13 IFSTOOL IFS Tool Jan 04, 2012
14 CVT101 IFS Strings and stream files converter Mar 29, 2011
15 FUPLOAD File Upload / Download Utility Aug 30, 2011
16 PGMREGEN Program Regeneration Utility Aug 06, 2010
17 DB2XTOOLS Db2XTool Utility: database files -> CSV, HTML, XML, TXT Jan 21, 2012
18 WEBSQL WebSql Utility: create SQL views and -> CSV, HTML, XML, TXT Jan 03, 2012
19 XLT941 HTML stream file translator Aug 06, 2010
20 EPOLICE Full control on anomalous events Jan 10, 2012
21 ZIP ZIP/UNZIP commands on the iSeries Nov 22, 2011
22 ZIPSAVE Save & zip Nov 17, 2011
23 XLTMSGF MSGF utility - Translate message descriptions used in DDS Nov 17, 2011
24 XLPARSE Excel spreadsheet utility - Read Excel XLS spreadsheets with ILE-RPG Oct 11, 2010
25 XLPARSE2 Excel spreadsheet utility - Read Excel XLS/XLSX spreadsheets with ILE-RPG Jan 12, 2012
26 XLSCGI Excel spreadsheet utility - Generate XML documents for spreadsheets Jan 16, 2012
27 HSSFCGI Excel spreadsheet utility - Create native Excel spreadsheets supporting graphics Jan 16, 2012
28 CGIWRKDBF Work with database files through your WEB browser Jan 26, 2012
29 PLCHECKUP Program Library Check-Up: bill-of-material for large applications Aug 06, 2010
30 ODF Object Distribution Facility Feb 02, 2011
31 VRTSAV Virtual Save and Transfer Sep 28, 2011
32 HOWTOAJAX Basic approach for using Ajax Jul 13, 2011
33 JSDATEPICK Pick Dates from a Calendar (based on jquery) Dec 27, 2011
34 FIXHDTAB Fix Header Tables (based on jquery) Dec 27, 2011

Let us have a look how the table works:

  1. The table
    1. 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.
    2. The table must also reference the plugin CSS class scrollableFixedHeaderTable
    3. The table must have an ID.
    All the above requirements are implemented in a statement like:
    <table class="myTable1 scrollableFixedHeaderTable" id="myTable1" ... >
  2. 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:
    1. scrollableFixedHeaderTable.css
    2. jquery-1.4.2.min.js
    3. jquery.cookie.pack.js
    4. jquery-dimensions.min.js
    5. jquery.scrollableFixedHeaderTable.js
    6. jquery-list-attributes.js
  3. 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:

  1. 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
    # Name Description Release
    date
    1 CGIDEV2 ILE-RPG CGI development kit Jan 13, 2012
    2 CGICBLDEV2 ILE-COBOL CGI Development Kit Jan 19, 2012
    3 CENTAUR2 E-commerce CGI Centaur Demo Feb 03, 2011
    4 JS2 JavaScript Tutorial Feb 06, 2011
    5 WRKVLDL Work with Validation Lists Feb 06, 2011
    6 LOGINOUT Web Session Login/Logout Manager Nov 22, 2011
    7 SECTCP Triple A Secured TCP Utility Nov 24, 2011
    8 WSECTCP Triple A Secured TCP Utility - WEB user Interface Nov 24, 2011
    9 EZPACK3 Library Compressor Utility Sep 09, 2010
    10 WEBACT iSeries WEB Access Toolkit Aug 06, 2010
    11 MMAIL iSeries MIME & Mail Jan 18, 2012
    12 POP3READ iSeries POP3 Client Dec 16, 2011
    13 IFSTOOL IFS Tool Jan 04, 2012
    14 CVT101 IFS Strings and stream files converter Mar 29, 2011
    15 FUPLOAD File Upload / Download Utility Aug 30, 2011
    16 PGMREGEN Program Regeneration Utility Aug 06, 2010
    17 DB2XTOOLS Db2XTool Utility: database files -> CSV, HTML, XML, TXT Jan 21, 2012
    18 WEBSQL WebSql Utility: create SQL views and -> CSV, HTML, XML, TXT Jan 03, 2012
    19 XLT941 HTML stream file translator Aug 06, 2010
    20 EPOLICE Full control on anomalous events Jan 10, 2012
    21 ZIP ZIP/UNZIP commands on the iSeries Nov 22, 2011
    22 ZIPSAVE Save & zip Nov 17, 2011
    23 XLTMSGF MSGF utility - Translate message descriptions used in DDS Nov 17, 2011
    24 XLPARSE Excel spreadsheet utility - Read Excel XLS spreadsheets with ILE-RPG Oct 11, 2010
    25 XLPARSE2 Excel spreadsheet utility - Read Excel XLS/XLSX spreadsheets with ILE-RPG Jan 12, 2012
    26 XLSCGI Excel spreadsheet utility - Generate XML documents for spreadsheets Jan 16, 2012
    27 HSSFCGI Excel spreadsheet utility - Create native Excel spreadsheets supporting graphics Jan 16, 2012
    28 CGIWRKDBF Work with database files through your WEB browser Jan 26, 2012
    29 PLCHECKUP Program Library Check-Up: bill-of-material for large applications Aug 06, 2010
    30 ODF Object Distribution Facility Feb 02, 2011
    31 VRTSAV Virtual Save and Transfer Sep 28, 2011
    32 HOWTOAJAX Basic approach for using Ajax Jul 13, 2011
    33 JSDATEPICK Pick Dates from a Calendar (based on jquery) Dec 27, 2011
    34 FIXHDTAB Fix Header Tables (based on jquery) Dec 27, 2011
  2. Column permanent selection

  3. 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
    # Name Description Release
    date
    1 CGIDEV2 ILE-RPG CGI development kit Jan 13, 2012
    2 CGICBLDEV2 ILE-COBOL CGI Development Kit Jan 19, 2012
    3 CENTAUR2 E-commerce CGI Centaur Demo Feb 03, 2011
    4 JS2 JavaScript Tutorial Feb 06, 2011
    5 WRKVLDL Work with Validation Lists Feb 06, 2011
    6 LOGINOUT Web Session Login/Logout Manager Nov 22, 2011
    7 SECTCP Triple A Secured TCP Utility Nov 24, 2011
    8 WSECTCP Triple A Secured TCP Utility - WEB user Interface Nov 24, 2011
    9 EZPACK3 Library Compressor Utility Sep 09, 2010
    10 WEBACT iSeries WEB Access Toolkit Aug 06, 2010
    11 MMAIL iSeries MIME & Mail Jan 18, 2012
    12 POP3READ iSeries POP3 Client Dec 16, 2011
    13 IFSTOOL IFS Tool Jan 04, 2012
    14 CVT101 IFS Strings and stream files converter Mar 29, 2011
    15 FUPLOAD File Upload / Download Utility Aug 30, 2011
    16 PGMREGEN Program Regeneration Utility Aug 06, 2010
    17 DB2XTOOLS Db2XTool Utility: database files -> CSV, HTML, XML, TXT Jan 21, 2012
    18 WEBSQL WebSql Utility: create SQL views and -> CSV, HTML, XML, TXT Jan 03, 2012
    19 XLT941 HTML stream file translator Aug 06, 2010
    20 EPOLICE Full control on anomalous events Jan 10, 2012
    21 ZIP ZIP/UNZIP commands on the iSeries Nov 22, 2011
    22 ZIPSAVE Save & zip Nov 17, 2011
    23 XLTMSGF MSGF utility - Translate message descriptions used in DDS Nov 17, 2011
    24 XLPARSE Excel spreadsheet utility - Read Excel XLS spreadsheets with ILE-RPG Oct 11, 2010
    25 XLPARSE2 Excel spreadsheet utility - Read Excel XLS/XLSX spreadsheets with ILE-RPG Jan 12, 2012
    26 XLSCGI Excel spreadsheet utility - Generate XML documents for spreadsheets Jan 16, 2012
    27 HSSFCGI Excel spreadsheet utility - Create native Excel spreadsheets supporting graphics Jan 16, 2012
    28 CGIWRKDBF Work with database files through your WEB browser Jan 26, 2012
    29 PLCHECKUP Program Library Check-Up: bill-of-material for large applications Aug 06, 2010
    30 ODF Object Distribution Facility Feb 02, 2011
    31 VRTSAV Virtual Save and Transfer Sep 28, 2011
    32 HOWTOAJAX Basic approach for using Ajax Jul 13, 2011
    33 JSDATEPICK Pick Dates from a Calendar (based on jquery) Dec 27, 2011
    34 FIXHDTAB Fixed Header Tables (based on jquery) Dec 27, 2011


contact us contact us