Question

I want to use the tablesorter plugin:
http://tablesorter.com/docs/

with the thead plugin:
http://www.asual.com/jquery/thead/

It works so far, but the thead plugin uses the source code before tablesorter added the sort functions so the sort function is missing in the “flying thead” if we scroll down.

How can I assign the modified html source by tablesorter to thead?

My code:

$(document).ready(function() {
        $.tablesorter.addParser({
            id: "axis",
            is: function(s) {
                return false;
            },
            format: function(s,table,cell) {
                    return $(cell).attr("axis");
            },
            type: "numeric"
        });
        $.tablesorter.addParser({
            id: "floatval",
            is: function(s) {
                return false;
            },
            format: function(s) {
                return s.replace(/\./g,"").replace(/,/g,".").replace(/[^0-9-.]/g, "");
            },
            type: "numeric"
        });
        $.tablesorter.addParser({
            id: "germandate",
            is: function(s) {
                return false;
            },
            format: function(s) {
                var a = s.split(".");
                a[1] = a[1].replace(/^[0]+/g,"");
                return new Date(a.reverse().join("/")).getTime();
            },
            type: "numeric"
        });
        $("#ax_overview").tablesorter({
            headers: {
                1:{sorter:"germandate"},
                2:{sorter:"floatval"},
                4:{sorter:"floatval"},
                5:{sorter:"floatval"},
                6:{sorter:"floatval"},
                7:{sorter:"floatval"},
                8:{sorter:"floatval"},
                9:{sorter:"axis"},
                10:{sorter:"floatval"}
            }
        });
        $("#ax_overview").thead();
    }
);

Demo:
http://www.kredit-forum.info/auxmoney-renditerechner-live-t221447.htm

EDIT:

thead function for fixed headers

_scroll = function() {
    $(_tables).each(function() {
        var w, s = 'thead tr th, thead tr td', 
            t = $('table', this.parent().prev()).get(0), 
            c = $('caption', t),
            collapse = $(t).css('border-collapse') == 'collapse',
            ths = $(s, t),
            offset = _d.scrollTop() - $(t).offset().top + _magicNumber;
        if (c.length) {
            offset -= c.get(0).clientHeight;
        }
        $(s, this).each(function(index) {
            var th = ths.eq(index).get(0);
            w = $(th).css('width');
            $(this).css('width', w != 'auto' ? w : th.clientWidth - _parseInt($(th).css('padding-left')) - _parseInt($(th).css('padding-right')) + 'px');
        });
        $(this).css({
            display: (offset > _magicNumber && offset < t.clientHeight - $('tr:last', t).height() - _magicNumber*2) ? $(t).css('display') : 'none',
            left: $(t).offset().left - _d.scrollLeft() + 'px',
            width: $(t).get(0).offsetWidth
        });
    });
};

Answer 1

So, I found this code over on CSS Tricks that essentially does the same thing as the thead plugin. I adapted the code and made a tablesorter widget which you can use 🙂

Here is the widget code, and a demo:

// Sticky header widget
// based on this awesome article:
// http://css-tricks.com/13465-persistent-headers/
// **************************
$.tablesorter.addWidget({
  id: "stickyHeaders",
  format: function(table) {
    if ($(table).find('.stickyHeader').length) { return; }
    var win = $(window),
      header = $(table).find('thead'),
      hdrCells = header.find('tr').children(),
      sticky = header.find('tr').clone()
        .addClass('stickyHeader')
        .css({
          width      : header.width(),
          position   : 'fixed',
          top        : 0,
          visibility : 'hidden'
        }),
      stkyCells = sticky.children();
    // update sticky header class names to match real header
    $(table).bind('sortEnd', function(e,t){
      var th = $(t).find('thead tr'),
        sh = th.filter('.stickyHeader').children();
      th.filter(':not(.stickyHeader)').children().each(function(i){
        sh.eq(i).attr('class', $(this).attr('class'));
      });
    });
    // set sticky header cell width and link clicks to real header
    hdrCells.each(function(i){
      var t = $(this),
      s = stkyCells.eq(i)
      // set cell widths
      .width( t.width() )
      // clicking on sticky will trigger sort
      .bind('click', function(e){
        t.trigger(e);
      })
      // prevent sticky header text selection
      .bind('mousedown', function(){
        this.onselectstart = function(){ return false; };
        return false;
      });
    });
    header.prepend( sticky );
    // make it sticky!
    win.scroll(function(){
      var $t = $(table),
        offset = $t.offset(),
        sTop = win.scrollTop(),
        sticky = $t.find('.stickyHeader'),
        vis = ((sTop > offset.top) && (sTop < offset.top + $t.height())) ? 'visible' : 'hidden';
      sticky.css('visibility', vis);
    });
  }
});

Then to use the widget, just include the this name in the widgets option when initializing the plugin:

$("table").tablesorter({ 
  widgets: ['stickyHeaders'] 
}); 

If you are interested, I’ve actually forked a copy of tablesorter at github and made a bunch of improvements. This widget is included in the “jquery.tablesorter.widgets.js” file and can be used in the original version of tablesorter.

Thanks for inspiring me to create this widget! 🙂