javascript - 结合jQuery tablesorter与thead:如何分配最终的html输出？

我想使用tablesorter插件:
http://tablesorter.com/docs/

使用thead插件:
http://www.asual.com/jquery/thead/

到目前为止，它仍然有效，但是thead插件在tablesorter添加了sort函数之前使用了源代码，因此如果向下滚动，则“flying thead”中缺少sort函数。

如何通过tablesorter将修改后的html源分配给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-live-t221447.htm

编辑:

固定 header 的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
        });
    });
};

最佳答案

因此，我发现this code over on CSS Tricks本质上与thead插件具有相同的功能。我修改了代码，并制作了一个tablesorter小部件，您可以使用它:)

这是小部件代码和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);
    });
  }
});

然后要使用小部件，只需在初始化插件时在小部件选项中包含此名称:

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

如果您有兴趣，我实际上已经在github上添加了forked a copy of tablesorter并进行了大量改进。该小部件包含在“jquery.tablesorter.widgets.js”文件中，并且可以在原始版本的tablesorter中使用。

感谢您启发我创建此小部件! :)

关于javascript - 结合jQuery tablesorter与thead:如何分配最终的html输出？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7714351/