Scrollable Fixed Header Table

This plug-in works with tablesorter.

Links

• Scrollable Fixed Header Table

Install

cd ~/repo/temp/
svn checkout http://jquery-sfht.googlecode.com/svn/trunk/ jquery-sfht

cd my/site/static/js/
mkdir jquery-sfht/
cd jquery-sfht/

cp ~/repo/temp/jquery-sfht/javascripts/jquery.cookie.pack.js .
cp ~/repo/temp/jquery-sfht/javascripts/jquery.dimensions.min.js .
cp ~/repo/temp/jquery-sfht/javascripts/jquery.scrollableFixedHeaderTable.js .

cd my/site/static/css/
mkdir jquery-sfht/
cd jquery-sfht/
cp -R ~/repo/temp/jquery-sfht/css/* .

Note: We don’t actually want to copy everthing in the css folder as it will include svn meta-data.

Usage

<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/common/jquery-sfht/themes/blue/style.css">
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/common/jquery-sfht/scrollableFixedHeaderTable.css">

<script type="text/javascript" src="{{ STATIC_URL }}js/common/jquery-1.6.4.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/common/jquery.tablesorter.js"></script>

<script type="text/javascript" src="{{ STATIC_URL }}js/common/jquery-sfht/jquery.cookie.pack.js" ></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/common/jquery-sfht/jquery.dimensions.min.js" ></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/common/jquery-sfht/jquery.scrollableFixedHeaderTable.js" ></script>

To initialise the table:

$('#myTable').scrollableFixedHeaderTable(500, 200);
$('#myTable').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'));
    });
});
$('.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();
    });
});