结合jQuery表和头部:如何分配最终的html输出

Combine jQuery tablesorter with thead: How to assign final html output?

本文关键字：分配 输出 html jQuery 头部 何分配 结合      更新时间：2023-09-26

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

与头插件:http://www.asual.com/jquery/thead/

到目前为止，它是有效的，但是头部插件使用的是在tableorter添加排序函数之前的源代码，所以如果我们向下滚动，"飞行头部"中没有排序函数。

我如何分配修改过的html源表排序头?

我代码:

$(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

编辑:

固定头函数

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

所以，我发现这段代码在CSS技巧，本质上做同样的事情作为头部插件。我调整了代码并制作了一个可以使用的表分类器小部件:)

下面是小部件代码，以及一个演示:

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

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

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

如果你感兴趣，我实际上已经在github上分叉了一个tablesorter的副本，并做了一些改进。这个小部件包含在"jquery.tablesorter.widgets.js"文件中，可以在原始版本的tablesorter中使用。

感谢你鼓励我创建这个小部件!:)

相关文章：