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, Internet Explorer 9.0, Chrome, Opera and Safari
- Outstanding reliability, perfect alignment between headers and body
- Warnings:
- 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.
- 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.
- 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
- Basic requirements
- Major parameters for function dataTable()
- Table examples
- Vertical scroll bar only
- Vertical scroll bar, information, data filtering
- Vertical scroll bar, sorting on first two columns only,
first column initially sorted in ascending mode
- About table width
1-Basic requirements
- 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>
|
- 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
} );
|
- 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):
Parameter | Function | Values |
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
- Vertical scroll bar only
<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 |
- Vertical scroll bar, information, data filtering
<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 |
- Vertical scroll bar, sorting on first two columns only,
first column initially sorted in ascending mode
<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> |
|