Объедините jQuery tableorter с thead: Как назначить окончательный вывод html?

Question

Я хочу использовать плагин TableSorter: http://tablesorter.com/docs/

с плагином thead: http://www.asual.com/jquery/thead/

Пока это работает, но плагин thead использует исходный код до того, как TableSorter добавит функции сортировки, поэтому функция сортировки отсутствует в "летающей игре", если мы прокручиваем вниз.

Как я могу назначить модифицированный источник html с помощью tableorter для thead?

Мой код:

$(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();
    }
);

Демо-версия: http://www.kredit -forum.info / auxmoney-renditerechner-живой t221447.htm

EDIT:

функция thead для фиксированных заголовков

_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

Итак, я нашел этот код в CSS Tricks , который по сути делает то же самое, что и плагин thead.Я адаптировал код и сделал виджет табличного сортировщика, который вы можете использовать :)

Вот код виджета, а демо :

// 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);
    });
  }
});

Затем использоватьВиджет, просто включите это имя в опцию виджетов при инициализации плагина:

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

Если вам интересно, я на самом деле раздвоил копию tableorter в github и сделалкуча улучшений.Этот виджет включен в файл "jquery.tablesorter.widgets.js" и может быть использован в оригинальной версии TableSorter.

Спасибо, что вдохновили меня на создание этого виджета!:)