Plugins

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');