[Link] JQuery Scrollable fixed header Table a jquery Plugin

[URL] http://jeromebulanadi.wordpress.com/2010/03/22/scrollable-fixed-header-table-a-jquery-plugin/

Scrollable Fixed Header Table – A JQuery Plugin

March 22, 2010 at 7:51 am | Posted in JQuery | 72 Comments
Tags: HTML Table, JQuery, JQuery Plugin, Scrollable HTML Table

This plugin allows html tables to be scrollable horizontally and vertically while headers are still visible and in tack with the columns. This plugin can be used in two modes:

• With column select – Columns to view can be selected. The select state can be persisted in a named cookie.
• Without column select

Live Demo

Demo. http://jeromebulanadi.oni.cc/scrollablefixedheader.html

With tablesorter blue theme. http://jeromebulanadi.oni.cc/sfht_sortable_blue.html

With tablesorter green theme. http://jeromebulanadi.oni.cc/sfht_sortable_green.html

Large table with 1450 rows using list-attrs plugin to improve rendering speed.  http://jeromebulanadi.oni.cc/scrollablefixedheader_big.html

Multi-row headers. http://jeromebulanadi.oni.cc/scrollablefixedheader_multirow_header.html

Download

http://plugins.jquery.com/files/sfht_1.0.1.zip

SVN repository (Latest up to date version)

Use this command to anonymously check out the latest project source code:

svn checkout http://jquery-sfht.googlecode.com/svn/trunk/ jquery-sfht-read-only

browse source code – http://code.google.com/p/jquery-sfht/source/browse

view change list – http://code.google.com/p/jquery-sfht/source/list

Dependencies

• JQuery 1.2 – This JQuery version was used when I first developed this plugin. The live demo uses JQuery 1.4.2
• JQuery Cookie - http://plugins.jquery.com/project/cookie. Required if to save the selected column state.
• JQuery Dimensions 1.2 – http://plugins.jquery.com/project/dimensions. Always required.
• JQuery list-attrs – Download from repository. Required if need to improve speed for very large tables.

Getting Started

1. Import dependencies

view source

print?

<link href="css/scrollableFixedHeaderTable.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="javascripts/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="javascripts/jquery.cookie.pack.js"></script>

<script type="text/javascript" src="javascripts/jquery.dimensions.min.js"></script>

<script type="text/javascript" src="javascripts/jquery.scrollableFixedHeaderTable.js"></script>

2. HTML Table. As of this version the following rules must be followed to make the plugin work.

• The table should have an id attribute.
• The table should be decorated with CSS class name. It does not work well with css id or style attribute yet.
• The table’s class attribute should have “scrollableFixedHeader” as one of the values.

Here’s the sample table. The highlighted line applies the rule above.

view source

print?

<style>

.myTable {

background-color: BLACK;

}

.myTable td {

background-color: WHITE;

}

.myTable .header td {

font-weight: bold;

background-color: #CCCCCC;

}

</style>

<table id="table1" class="myTable scrollableFixedHeaderTable" width="600px" cellspacing="1">

<tr class="header">

<td>Header1</td><td>Header2</td><td>Header3</td><td>Header4</td>

</tr>

<tr>

<td>cell (1, 1)</td><td>cell (2, 1)</td><td>cell (3, 1)</td><td>cell (4, 1)</td>

</tr>

<tr>

<td>cell (1, 2)</td><td>cell (2, 2)</td><td>cell (3, 2)</td><td>cell (4, 2)</td>

</tr>

<tr>

<td>cell (1, 3)</td><td>cell (2, 3)</td><td>cell (3, 3)</td><td>cell (4, 3)</td>

</tr>

<tr>

<td>cell (1, 4)</td><td>cell (2, 4)</td><td>cell (3, 4)</td><td>cell (4, 4)</td>

</tr>

<tr>

<td>cell (1, 5)</td><td>cell (2, 5)</td><td>cell (3, 5)</td><td>cell (4, 5)</td>

</tr>

3. Call the plugin function.

view source

print?

$(document).ready(function(){

$('#table1').scrollableFixedHeaderTable(300,100,'true','scr_table_1_');

});

Usage

With column select . Selected columns remained after page reload.

$(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie);

With column select.  All columns are restored after page reload.

$(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect);

Without column select

$(tableID).scrollableFixedHeaderTable(widthpx, heightpx);

Multirow headers

$(tableID).scrollableFixedHeaderTable(widthpx, heightpx, null, null, rowCount);

Arguments

• tableID – ID of the table to transform
• widthpx – width in pixels of the transformed table
• heightpx – height in pixels of the transformed table
• showSelect – When true, shows a blue arrow on top
• cookie – cookie where the selected state of the column select will be stored.
• rowCount - number of header rows

Multi-row Headers

Reference from #comment-83.

Using column select only works if there are no rowspans and colspans as there is no easy way to map the header’s tr tag index to the group of tr tags in the data that is why I placed null on the column select parameters.

$(tableID).scrollableFixedHeaderTable(widthpx, heightpx, null, null, rowCount);

The row count parameters determines the number of rows from the top to be used as a header.

While version 1.0.2 is not released yet, you can download the latest source from the trunk.

Get the latest trunk source jquery.scrollableFixedHeaderTable.js

Here’s the live demo.

http://jeromebulanadi.oni.cc/scrollablefixedheader_multirow_header.html

Improve Table Transformation Speed

By default, the plugin extracts the header using the easy way:

$(sourceTable).clone().find('tr:gt(0)').remove();

That line of code creates a copy of the source table then reduces that copy to headers only. This may be good for small tables but not for very big tables. see #comment-62.

For speed improvement, get the latest plugin version, and list-attrs plugin.

Here are the links

jquery.scrollableFixedHeaderTable.js

jquery-list-attributes.js

Add the a Document type to your page to force IE 8 to render in standards mode.

example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Add the listAttributes plugin to your scripts.

<script type="text/javascript" src="javascripts/jquery-list-attributes.js"></script>

You may clear your cache of the of sfht plug in.

That’s all! The latest sfht plugin will use grab only the header when the listAttrs plugin is detected.

Here’s a live demo with a table containing 1450 rows.  The page transforms the table after the document loads in a short time.

http://jeromebulanadi.oni.cc/scrollablefixedheader_big.html

Integrating with JQuery Tablesorter

You can view live the the demo here:

blue theme. http://jeromebulanadi.oni.cc/sfht_sortable_blue.html

green theme. http://jeromebulanadi.oni.cc/sfht_sortable_green.html

or offline with the sfth_1.0.1 release. sfht_sortable_blue.html and sfth_sortable_green.html

Tablesorter is great jQuery plugin for sorting data with a click on the header.  Integration with this plugin have a few changes, however.

1. The table should have in this tag order:

<table>
  <thead>
    <tr>
      <th>...</th>
      ...
    </tr>
    ...
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
    </tr>
    ...
  </tbody>
</table>

Yes, th for header and td for data.

2. Remove the width, border and padding from table.tablesorter class from the selected table sorter theme. This ensures compatibility with browser box models. This example is from themes\blue\styles.css of the tablesorter package.

table.tablesorter {
  font-family:arial;
  background-color: #CDCDCD;
  /* margin:10px 0pt 15px; */
  font-size: 8pt;
  /* width: 100%; */
  text-align: left;
}

The modifications are ready, you can add this imports from table sorter.

<link href="css/themes/blue/style.css" rel="stylesheet"  type="text/css" />
<script type="text/javascript" src="javascripts/jquery.tablesorter.js"></script>

Now,  for the initializing script.

$(document).ready(function(){
    $('#myTable1').scrollableFixedHeaderTable(800, 200, true, 'mycookie');
    $('#myTable1').tablesorter().bind('sortEnd', function(){
        var $cloneTH = $('.sfhtHeader thead th');
        var $trueTH = $('.sfhtData thead th');
        $cloneTH.each(function(index){
            $(this).attr('class', $($trueTH[index]).attr('class'));
        });
    });

    /* synchronize sortable and scrollable */
    $('.sfhtHeader thead th').each(function(index){
        var $cloneTH = $(this);
        var $trueTH = $($('.sfhtData thead th')[index]);
        $cloneTH.attr('class', $trueTH.attr('class'));
        $cloneTH.click(function(){
            $trueTH.click();
        });
    });
});

If your are using the green theme. Use spaces as padding for the headers. The script below adds 10 spaces to each header.

$('th.header').each(function(){
  var $this = $(this);
  var spaced = '          '
  + $(this).html();
  $this.html(spaced);
});

The multisort feature, using shift key, does not work by clicking on the floating header.

It may be possible by means of programmatic multisorting instead of using the original click event.