Javascript 将jQueryTableSorter与thead结合起来：如何分配最终的html输出？

我想使用tablesorter插件：

使用thead插件：

到目前为止它还可以工作，但是thead插件在tablesorter添加排序函数之前使用了源代码，因此如果我们向下滚动，“flying thead”中缺少排序函数

如何通过tablesorter将修改后的html源分配给AD

我的代码：

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

演示：

编辑：

固定标题的ad函数

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

\u scroll=function（）{
$（_表）。每个（函数（）{
变量w，s='thead tr th，thead tr td'，
t=$（'table'，this.parent（）.prev（））.get（0），
c=$（“标题”，t），
collapse=$（t）.css（'border-collapse'）=='collapse'，
ths=$（s，t），
偏移量=_d.scrollTop（）-$（t）.offset（）.top+_magicNumber；
如果（c.长度）{
偏移量-=c.get（0）.clientHeight；
}
$（s，this）.每个（函数（索引）{
var th=th.eq（索引）.get（0）；
w=$（th.css（'width'）；
$（this）.css（$（this）.css（$（width'，w！='auto'）？w:th.clientWidth-_-parseInt（$（th）.css（$（th）.css（$（padding-right'）））+'px'）；
});
$（this.css）({
显示：（offset>\u magicNumber&&offset

因此，我发现它与thead插件的功能基本相同。我修改了代码并制作了一个tablesorter小部件，您可以使用它：）

以下是小部件代码，以及：

如果你感兴趣的话，我已经在github做了很多改进。这个小部件包含在“jquery.tablesorter.widgets.js”文件中，可以在原始版本的tablesorter中使用

---

感谢您鼓励我创建此小部件！：）

单元格填充/单元格间距/宽度/左侧看起来不正确。看看这个评论：也许这就是原因。但在thead插件中，也设置了电池的填充物。向上滚动，我添加了thead正在使用的函数。发现一个“bug”。如果调整窗口大小，则固定头不会调整大小。在thead插件中，调整大小是在客户端滚动后完成的。我认为这没关系（意味着不需要onresize事件）。@mgutt实际上复制了整个

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'] 
});