DEMO

ZIP

/*
 *
 * ThableSorter 0.9 - Thead Fixed for Tablesorter
 * $Date: 2008-04-24 17:02:29 +0200 (gio, 24 apr 2008) $
 * $Rev: 23 $
 * @requires jQuery v1.2.3
 * @requires TableSorter 2.0.3
 *
 * Copyright (c) 2008 Massimiliano Balestrieri
 * Examples and docs at: http://maxb.net/blog/
 * Licensed GPL licenses:
 * http://www.gnu.org/licenses/gpl.html
 *
 */

ThableSorter = {
    options : {},
    build     : function(options)
    {

        ThableSorter.options = options || {};
        return this.each(
            function(nr)
            {
                //setto un po' di variabili
                var height      = ThableSorter.options.height || 150;

                var box_id      = 'thable-' + nr + '-thfixed';
                var clone_id = 'thable-' + nr + '-clone';
                var target      = 'thable-' + nr + '-target';
                var wrapper  = '<div class="thfixed" id="'+ box_id +'"><div class="thfixed-head"><div class="thfixed-head-box" id="'+target+'"></div></div><div class="thfixed-body"></div></div>';

                //jQuery DOM reference
                var Jtable  = jQuery(this);
                var Jparent = Jtable.parent();
                console.log(Jtable.css('width'));

                //creo il wrapper e lo appendo al parent della table. sposto la table dentro al wrapper
                Jparent.append(wrapper);
                jQuery("#" + box_id + ">.thfixed-body").append(Jtable);//sposta? magico. non me lo spiego tanto

                var Jclone = Jtable.clone();
                jQuery("tbody", Jclone).empty();

                jQuery("#" + target).append(Jclone);

                //stili wrapper
                jQuery(".thfixed, .thfixed-head").css({"overflow" : "hidden","position":"relative", "width" : Jtable.css('width')});
                jQuery(".thfixed-body").css({"overflow" : "auto","position":"relative", "height" : height});

                Jclone.css({"margin":"0"});
                Jtable.css({"margin-top":"0"});

                //jQuery DOM reference
                var Jbuttons = jQuery("thead>tr>th", Jtable);
                var Jtrh     = jQuery("thead>tr", Jtable);
                var Jtd      = jQuery("tbody>tr>", Jtable);
                var Jtriggers= jQuery("thead>tr>th", Jclone);

                Jtriggers.each(
                    function(nr){
                        var width = parseInt(Jbuttons.eq(nr).css('width'));
                        jQuery(this).attr('style' , 'width:'+ width + 'px');

                        //td width
                        if(nr == (Jtriggers.length - 1))
                            width -= 10;

                        Jtd.eq(nr).attr('style' , 'width:'+ width + 'px');

                        jQuery(this).click(function(){

                            Jtriggers.each(function(nr2){
                                if(nr !== nr2){
                                    jQuery(this).removeClass('headerSortDown');
                                    jQuery(this).removeClass('headerSortUp');
                                }
                            });

                            //triggero il bottone della tabella originale
                            Jbuttons.eq(nr).trigger('click');

                            //setto le freccine
                            var classes = jQuery(this).attr('class').split(" ");
                            //console.log(classes);
                            if(classes[1]){
                                if(classes[1] == ‘headerSortDown’){
                                    jQuery(this).removeClass(’headerSortDown’);
                                    jQuery(this).addClass(’headerSortUp’);
                                }else if (classes[1] == ‘headerSortUp’){
                                    jQuery(this).removeClass(’headerSortUp’);
                                    jQuery(this).addClass(’headerSortDown’);
                                }
                            }else{
                                jQuery(this).addClass(’headerSortDown’);
                            }
                        });

                    }

                );

                //nascondo il th della tabella originale
                Jtrh.css(’display’,'none’);

            }
        );

    }
};
jQuery.fn.thablesorter = ThableSorter.build;

//default
jQuery(document).ready(function(){
    jQuery(".tablesorter").tablesorter().thablesorter();
});