jQuery plugins by Riccardo Coletta

Plugins

Overview
Demo
Demo Source
Options
Methods
Download
Spot (please click)

First of all I apologies for my bad english

A table MUST be organized this way to be used with this plugin

The table MUST have a "thead" section
All cells in thead section MUST BE "th" (not "td")
The table MUST have a tbody section
If there is a tfoot section, all cells MUST be "th" (not "td")

To create a scrollable table you simply add this istruction to your site (height and width are example values)

      $("#mytable").jqtablescroll({
        height: 300, width: 500
      });

The inner implementation uses a double <div> section "wrapped" around the table, with four CSS rules

The outer "div" container will have the class "outerScroll" (position relative), fixed width, based on the options passed
The second "div" container will have the class "innerScroll", fixed width and heightbased on the options passed
The table will have a fixed width equal to the "width option" minus 18px (because of the vertical scrollbar)
Each of the thead rows (TR), will inherit "position absolute", left 0px and top based on the row height and the previous rows
Each of the thead cells (TH), will have fixed width, based on the option passed (if passed)
Each of the tbody first row cells will have fixed width, based on the option passed (if passed)
Each of the tfoot rows (TR), will inherit "position absolute", left 0px and bottom based on the row height and the previous rows
Each of the tfoot cells (TH), will have fixed width, based on the option passed (if passed)

Header span 2		Small	Header span 2
Hidden	Hidden	Hidden	Hidden	Hidden
Head1	Head2	Head3	Head4	Head5
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell
Foot span 2		Foot span 3
Hidden	Hidden	Hidden	Hidden	Hidden
Foot span 5

<script type="text/javascript">
  $(function(){
    $("#scrollTable > thead th, #scrollTable > tfoot th").addClass("ui-widget-header");
    $("#scrollTable > tbody td").addClass("ui-widget-content");
    $("#scrollTable").jqtablescroll({
      width: 650, 
      height: 200, 
      colWidth: [200,null,10]
    });
  });
</script>
<style type="text/css">
  .outerScroll {position:relative; margin: 0 auto 0 auto;}
  .innerScroll {overflow-y:auto; overflow-x: hidden;}     
  .outerScroll thead tr {position:absolute; left:0;}      
  .outerScroll tfoot tr {position:absolute; left:0}
</style>
<table id="scrollTable">
  <thead>
    <tr>
      <th colspan="2">Header span 2</th> 
      <th>Small</th> 
      <th colspan="2">Header span 2</th> 
    </tr>
    <tr style="visibility: hidden;">
      <th>Hidden</th> 
      <th>Hidden</th> 
      <th>Hidden</th> 
      <th>Hidden</th> 
      <th>Hidden</th> 
    </tr>
    <tr>
      <th>Head1</th> 
      <th>Head2</th> 
      <th>Head3</th> 
      <th>Head4</th> 
      <th>Head5</th> 
    </tr>
  </thead>

  <tbody id="mytbody">
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Foot span 2</th>
      <th colspan="3">Foot span 3</th>
    </tr>
    <tr style="visibility: hidden;">
      <th>Hidden</th>
      <th>Hidden</th>
      <th>Hidden</th>
      <th>Hidden</th>
      <th>Hidden</th>
    </tr>
    <tr>
      <th colspan="5">Foot span 5</th>
    </tr>
  </tfoot>
</table>

height

Choose the table height. This value indicates the full table height, included tfoot and thead sections

Code examples

Initialize table with the height (in pixel) option specified

$('.selector').jqtablescroll({height: 500})

Get or set the height option, after init

// Getter
var heightOption = $(".selector").jqscrolltable('option','height');
// Setter
$(".selector").jqscrolltable('option','height',150);

It is very important to remeber to use this option to change the height of the table, because this option will not only change the table (and his containers) height, but it will repositions the tfoot and thead rows (all with "position: absolute" style). If you try

$(".selector").height(150)

Your table won't display correctly

width

Choose the table width. This value indicates the full table width, included scrollbar (18px)

Code examples

Initialize table with the width (in pixel) option specified

$('.selector').jqtablescroll({width: 700})

Get or set the width option, after init

// Getter
var widthOption = $(".selector").jqscrolltable('option','width');
// Setter
$(".selector").jqscrolltable('option','width',700);

It is very important to remeber to use this option to change the width of the table, because this option will change not only the table width, but also his "containers" style

$(".selector").height(700);

Your table won't display correctly

colWidth

This option is used to choose the fixed width of the table columns.
The option is an array of value, one for each column. If a value is "null" or "false", the plugin will choose the column width automatically (using the browser default)

Code examples

Initialize the table, with the first and third colum width fixed

$(".selector").jqtablescroll({width: 700, height: 200, colWidth: [100, false, 150]});

Get or set the width option, after init

// Getter
var colWidthOption = $(".selector").jqscrolltable('option','colWidth');
// Setter
$(".selector").jqscrolltable('option','colWidth',[150,null,null,200]);

height

This method return the full height of the table

  var tableHeight = $(".selector").jqtablescroll('height');

width

This method return the full width of the table
The "right padding" for the scrollbar (18px) is included

  var tableWidth = $(".selector").jqtablescroll('width');

option

This method is used to set or get an option value

  // Get
  var optionValue = $(".selector").jqtablescroll('option',optionName);
  // Set
  var optionValue = $(".selector").jqtablescroll('option',optionName, optionValue);

repaint

This method repaint the table. It must be used (for example) if the table was initialized when "hidden", because of the lack of real height for hidden sections, or can be used when you hide or show one or more "thead" and/or "tfoot" rows and thus you need to "reposition" the rows and chenge the padding for the body

  $(".selector").jqtablescroll('repaint');

ui.jqtablescroll.zip