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

 
Fixed Header Tables: DataTables Plugin

This plugin is based on DataTables thick library, containing an incredible number of scripts, examples and documentation pages.

When you install the utility FXHDTAB, you get the full library in IFS directory /DataTables, so that, even if the original disappears from the WEB, you would still be able to run your code.

May we suggest a few pages for your reference:   We do not go through all the features of this plugin, it would take the dedication of a 14th century friar to do that. We just scratch the plugin surface and provide a few examples you may start working with.

A few remarks about this plugin:

  • Tested on FireFox 19.0, MS Internet Explorer 9.0 (see footnote #1), Chrome, Opera and Safari
  • Outstanding reliability, perfect alignment between headers and body
  • Warnings:
    1. While colspan and rowspan keywords are supported in < TH > tags, they are NOT supported in < TD > tags.
      If you specify them in some table row, the script gives up table rendering and you get a traditional table.
    2. The number of table cells in each row MUST always MATCH the number of columns. In other words, a missing < td > or an extra one will cause suppression of table rendering.
    3. When processing more than one table in a page, an error in one of the tables will cause termination of rendering for all the tables.

Contents of this page

  1. Basic requirements
  2. Major parameters for function dataTable()
  3. Table examples
    1. Vertical scroll bar only
    2. Vertical scroll bar, information, data filtering
    3. Vertical scroll bar, sorting on first two columns only,
      first column initially sorted in ascending mode
  4. About table width


1-Basic requirements

  1. The following links must be added to your HTML page:
    <!--======== LINKS TO DATATABLE PLUGIN ==========================================-->
    <style type="text/css" title="currentStyle">
         @import "/datatables/media/css/demo_page.css";
         @import "/datatables/media/css/demo_table.css";
    </style>
    <script type="text/javascript" language="javascript" src="/datatables/media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="/datatables/media/js/jquery.dataTables.js"></script>
  2. You must then add a JQuery script as follow:
    <!--======= jquery function  =======-->
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        ...a dataTable() function for each table to be processed...
    } );
    </script>
    • where for each table to be processed you have to specify a dataTable() function specifying an appropriate sets of parameters (see Major parameters further on):
              $('#tableID').dataTable( {
                  "parameter1": value1,
                  "parameter2": value2,
                      ...  ... ...   
                  "parametern": valuen
              } );
    • The string tableID above represents the ID assigned to the <table> processed by the related dataTable function. For instance
      $('#mytable1').dataTable( { ... } );
      apply to the table identified as
      <table id="mytable1" ... >
    • Note - If all the tables in a page should be processed by the same dataTable function, there is no need to assign an ID to each table. In this case simply specify ID '.dataTable' to the only dataTable function:
               $('.dataTable').dataTable( {
                  "parameter1": value1,
                  "parameter2": value2,
                      ...  ... ...   
                  "parametern": valuen
               } );
  3. For being processed from function dataTable,
    • table headers <th>'s must stay in a <THEAD> - </THEAD> container, and
    • table rows <tr>'s must stay in a <TBODY> - </TBODY> container.
    • An optional container <TFOOT> - </TFOOT> can be provided for table footer <th>'s.
    Example:
    <TABLE id="mytable1">
      <THEAD>
        <tr><th>First name</th><th>Last name</th></tr>
      </THEAD>
      <TFOOT>
        <tr><th>First name</th><th>Last name</th></tr>
      </TFOOT>
      <TBODY>
        <tr><td>Harry</td><td>Smith</td></tr>
        <tr><td>...</td><td>...</td></tr>
        <tr><td>Meggy</td><td>Whitehead</td></tr>
      </TBODY>
    </TABLE>

See the Tables Examples further in this page for more clarification.


2-Major parameters for function dataTable()

The following is a list of major parameters of function dataTable() when scrollable fixed header tables are used (for more information about them, see pages Features and Reference):
ParameterFunctionValues
Examples
"bPaginate": true  /   false Enables or disables pagination true or false
Default value: true
This parameter should always explicitly set to false when vertical scrolling is required..
See the next example.
"sScrollY": "nnnpx" Enables vertical scrolling. Vertical scrolling will constrain the DataTable to the given height, and enable scrolling for any data which overflows the current viewport. Its value can be any CSS unit, or a number (in which case it will be treated as a pixel measurement).
Default value: false
Example:
<script type="text/javascript" charset="utf-8">;
  $(document).ready(function() {
     $('#mytable1').dataTable( {
       "bPaginate": false,
       "sScrollY":  "200px"
     } );
  } );
</script>
"sScrollX": "nnnpx" Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable x-scrolling to show the table in a viewport, which can be scrolled. Its value can be any CSS unit, or a number (in which case it will be treated as a pixel measurement).
Default value: false
We recommend to never use this parameter
"bInfo": true  /  false Enable or disable the table information display. This shows information about the data that is currently visible on the page, including information about filtered data if that action is being performed. true or false
Default value: true
If you do not want this kind of information at the bottom of the table, you must explicitly ask to drop it. Example:
<script type="text/javascript" charset="utf-8">;
  $(document).ready(function() {
    $('#mytable1').dataTable( {
       "bPaginate": false,
       "sScrollY":  "200px",
       "bInfo":     false
     } );
  } );
</script>
"bFilter": true  /  false Enables or disables filtering of data. Filtering in DataTables is "smart" in that it allows the end user to input multiple words (space separated) and will match a row containing those words, even if not in the order that was specified (this allow matching across multiple columns). true or false
Default value: true
If you do not want wish to use this feature, you must explicitly ask to drop it. Example:
<script type="text/javascript" charset="utf-8">;
  $(document).ready(function() {
     $('#mytable1').dataTable( {
       "bPaginate": false,
       "sScrollY": "200px",
       "bFilter": false
     } );
  } );
</script>
"bSort": true  /  false Enables or disables sorting of columns. Sorting of individual columns can be disabled by the "bSortable" option for each column. true or false
Default value: true
If you do not want wish to use this feature, you must explicitly ask to drop it. Example:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
     $('#mytable1').dataTable( {
       "bPaginate": false,
        "sScrollY":  "200px",
       "bSort":     false
     } );
  } );
</script>
"bSortable" allows to disable the sorting of a given column.
In the following example, sorting is disabled in columns 1 and 4 of a 4-columns table:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
     $('#mytable1').dataTable( {
       "bPaginate": false,
       "sScrollY":  "200px",
       "bSort":     true,
       "aoColumns": [{ "bSortable": false }, null, null, { "bSortable": false }]
     } );
  } );
</script>
"aaSorting" allows to set the initial sort direction of a given column.
In the following example, the intial sort direction of column 1 is set in ascending mode:
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
     $('#mytable1').dataTable( {
       "bPaginate": false,
       "sScrollY":  "200px",
       "bSort":     true,
       "aaSorting": [[ 0, "asc" ]]
     } );
  } );
</script>



4-Table examples


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


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



  5. Vertical scroll bar, sorting on first two columns only,
    first column initially sorted in ascending mode
  6. <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
          $('#mytable3C').dataTable( {
            "bPaginate": false,
            "sScrollY":  "200px",
            "bInfo":     false,
            "bFilter":   false,
            "bSort":     true,
            "aaSorting": [[ 0, "asc" ]],
            "aoColumns": [null, null, { "bSortable": false }]    
          } );
    </script>
    Easy400.net utilities
    Name Description Release
    date
    CGIDEV2 ILE-RPG CGI development kit Jan 13, 2012
    CGICBLDEV2 ILE-COBOL CGI Development Kit Jan 19, 2012
    CENTAUR2 E-commerce CGI Centaur Demo Feb 03, 2011
    JS2 JavaScript Tutorial Feb 06, 2011
    WRKVLDL Work with Validation Lists Feb 06, 2011
    LOGINOUT Web Session Login/Logout Manager Nov 22, 2011
    SECTCP Triple A Secured TCP Utility Nov 24, 2011
    WSECTCP Triple A Secured TCP Utility - WEB user Interface Nov 24, 2011
    EZPACK3 Library Compressor Utility Sep 09, 2010
    WEBACT iSeries WEB Access Toolkit Aug 06, 2010
    MMAIL iSeries MIME & Mail Jan 18, 2012
    POP3READ iSeries POP3 Client Dec 16, 2011
    IFSTOOL IFS Tool Jan 04, 2012
    CVT101 IFS Strings and stream files converter Mar 29, 2011
    FUPLOAD File Upload / Download Utility Aug 30, 2011
    PGMREGEN Program Regeneration Utility Aug 06, 2010
    DB2XTOOLS Db2XTool Utility: database files -> CSV, HTML, XML, TXT Jan 21, 2012
    WEBSQL WebSql Utility: create SQL views and -> CSV, HTML, XML, TXT Jan 03, 2012
    XLT941 HTML stream file translator Aug 06, 2010
    EPOLICE Full control on anomalous events Jan 10, 2012
    ZIP ZIP/UNZIP commands on the iSeries Nov 22, 2011
    ZIPSAVE Save & zip Nov 17, 2011
    XLTMSGF MSGF utility - Translate message descriptions used in DDS Nov 17, 2011
    XLPARSE Excel spreadsheet utility - Read Excel XLS spreadsheets with ILE-RPG Oct 11, 2010
    XLPARSE2 Excel spreadsheet utility - Read Excel XLS/XLSX spreadsheets with ILE-RPG Jan 12, 2012
    XLSCGI Excel spreadsheet utility - Generate XML documents for spreadsheets Jan 16, 2012
    HSSFCGI Excel spreadsheet utility - Create native Excel spreadsheets supporting graphics Jan 16, 2012
    CGIWRKDBF Work with database files through your WEB browser Jan 26, 2012
    PLCHECKUP Program Library Check-Up: bill-of-material for large applications Aug 06, 2010
    ODF Object Distribution Facility Feb 02, 2011
    VRTSAV Virtual Save and Transfer Sep 28, 2011
    HOWTOAJAX Basic approach for using Ajax Jul 13, 2011
    JSDATEPICK Pick Dates from a Calendar (based on jquery) Dec 27, 2011
    FIXHDTAB Fix Header Tables (based on jquery) Dec 27, 2011



4-About table width

A table, whens processed by the DataTables plugin, is assigned the same width as its HTML containing element (a <table>, a <div>, etc.) regardless of whatever specified in the table WIDTH.
In absence of a container element, the table assumes the page width.

In order to control the width of a table may be therefore necessary to define a container holding the table, see the following example:

<style>
.myTableContainer {width: 700px; margin-left: 30px; margin-top: 15px; margin-bottom: 15px;}
</style>
            ... ... ...
<div class="myTableContainer">
     <table  class="..." id="...">
            ... ... ...
     </table>
</div>





FOOTNOTES
  1. Our tests on MS Internet Explorer have shown that this browser may provide unexpected table rendering when the data in the table rows exceed some unknown limit (it looks like a memory problem). Should this happen, we suggest that you give up with the use of this JQuery plugin for such a table: do not waste your time any further.



contact us contact us