Documentation

Notice:

This plugin is still in beta and more features will be added very soon!

Requirements

  • jQuery 1.3.2 – download here

Supported Browsers

fixedHeaderTable has been tested for compatibility in the following browsers:

  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Firefox 3
  • Firefox 3.5
  • Safari 4

Installation

Installing Fixed Header Table is relatively straight forward. Simply include both the jQuery and fixedHeaderTable library files using script html element(s), like so:

<script type=”text/javascript” src=”js/jquery.1.3.2.min.js”></script>

<script type=”text/javascript” src=”js/fixedheadertable.js”></script>

Also include the stylesheet like so:

<link rel=”stylesheet” type=”text/css” href=”css/fixedHeaderTable.css” />

Notice the jQuery library is included before fixedheadertable.js. This is required in order for the library to function correctly.
It is recommended that all javascript includes be placed at the bottom of the page after the content just before the </body> tag. This ensures that all content is loaded before manipulation of the DOM occurs.

HTML structure

Once the table is created, it will have a common HTML structure in this form:

<div class=”fht_table_block”>
<div class=”fht_loader”></div>
<div class=”fht_parent”>
<div class=”fht_fixed_header_table_parent”>
<div class=”fht_top_right_header”></div>
<div class=”fht_top_left_header”></div>
<div class=”fht_fixed_header_table_border”>
<table>
lt;thead>
</thead>
</table>
</div>
</div>
<div class=”fht_table_body”>
<table>
<tbody>
</tbody>
</table>
</div>
<div class=”fht_footer”>
</div>
</div>
</div>

Creating a table with a fixed header

Creating a table with fixedHeaderTable is very easy.

Setup a table on the page as normal using standard HTML table elements. Place the table inside the element that you want it to resize to. Example:

<div class=”table1″>
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</thead>
<tbody>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tbody>
</table>
</div>

To generate the table you need to call jQuery(element).fixedHeaderTable() (element is whatever element your table loads inside) when you are ready for the plugin to do its magic. This can be done after an ajax request is made to fetch data or if you have a static table, after the DOM has completed loading. FixedHeaderTable will do the rest.

Options

There are several options you can pass through to fixedHeaderTable.

  • A footer using your own unique content (disabled by default)
  • A footer with the header cloned inside it (disabled by default)
  • A preloader while jQuery builds the table (disabled by default)
  • Borders for your columns (enabled by default)

If you want to use your own footer for pagination or other content simply pass footer:true and footerId:elementId as parameters. jQuery(element).fixedHeaderTable({footer:true, footerId:elementId});
footerId is the element that contains your footer markup.

If you want to clone the header in the footer simply set footer:true and cloneHeaderToFooter:true as parameters. jQuery(element).fixedHeaderTable({footer:true, cloneHeaderToFooter:true});

Error checking

If your table markup is invalid the entire page background will be changed to red.

Comments are closed.