如何固定具有粘性标题的表的大小以及排序和搜索

How to fix the size of a table having a sticky header as well as sorting and searching?

本文关键字：排序 搜索 何固定 有粘性 标题      更新时间：2023-12-13

我有一个带有排序搜索和粘性表头的表。我面临的第一个问题是无法将页眉与桌子粘在一起。滚动时它粘在窗户上。其次，我无法重新调整桌子的宽度和高度。当我把它放在div标签里时，粘性标题就不起作用了

请帮助我如何做到这一点。

<script id="js">$(function(){
    $("table").tablesorter({
        widthFixed : true,
        showProcessing: true,
        headerTemplate : '{content} {icon}', 
        // Add icon for jui theme; new in v2.7!
        widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],
        widgetOptions: {
           // extra css class name applied to the sticky header row (tr) - changed in v2.11
          stickyHeaders : '',
          // adding zebra striping, using content and default styles - the ui css removes the background from default
          // even and odd class names included for this demo to allow switching themes
          zebra   : ["ui-widget-content even", "ui-state-default odd"],
          // use uitheme widget to apply defauly jquery ui (jui) class names
          // see the uitheme demo for more details on how to change the class names
          uitheme : 'jui'
        }
    });
});</script>

这是css 的js文件

  <script src="js/jquery.tablesorter.widgets.js"></script>

试着和我在jsfiddle上做的一样：

[http://jsfiddle.net/Ziad/2EZjJ/][1]

现在有一个css粘性头小部件，但它仍在测试中。

尽管上面分享的当前可用版本不允许将粘性标头附加到其父项，但有一个演示正在使用此功能（请参阅本期更新）。最后一个需要克服的问题是在Firefox中正确粘贴标题（cssStickyHeaders_addCaption选项）。

$(function () {
    $("table").tablesorter({
        widgets: ['cssStickyHeaders'],
        widgetOptions: {
            cssStickyHeaders_offset: 0,
            cssStickyHeaders_addCaption: true,
            cssStickyHeaders_attachTo: null
        }
    });
});

我希望能帮助找到任何其他需要解决的问题，除了边界不属于粘性细胞（哈哈，我不知道如何解决这个问题）。

相关文章：