如何使用 tablesorter stickyheaders 小部件 - 不工作？答案

【问题标题】：How to use tablesorter stickyheaders widget - not working?如何使用 tablesorter stickyheaders 小部件 - 不工作？
【发布时间】：2014-09-03 10:10:49
【问题描述】：

我在尝试将stickyHeaders 小部件实现为tablesorter 插件的一部分时遇到问题。我已按照通过 Stackoverflow 和其他网站设法找到的每个教程的说明进行操作，但似乎没有任何效果。

这是我的标题代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> Sales Report </title>
<link href="admin_style.css" rel="stylesheet" type="text/css">

    <!-- jQuery: required (tablesorter works with jQuery 1.2.3+) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <link href="tablesorter/css/theme.dropbox.css" rel="stylesheet">    
    <script src="tablesorter/js/jquery.tablesorter.min.js"></script>
    <script src="tablesorter/js/jquery.tablesorter.widgets.min.js"></script>
    <script>
    $(function(){
        $('table').tablesorter({
            widgets        : ['zebra', 'columns', 'stickyHeaders'],
            usNumberFormat : false,
            sortReset      : true,
            sortRestart    : true
        });
    });
    </script>
</head>

正文 HTML

<table id="table" class="tablesorter-dropbox" border="0" cellpadding="4" cellspacing="0">
        <thead>
        <tr>
            <th align="center" valign="top">Brand</th>
            <th align="center" valign="top">Bawtry  Mens</th>
            <th align="center" valign="top">£</th>
            <th align="center" valign="top">Bawtry Ladies</th>
            <th align="center" valign="top">£</th>
            <th align="center" valign="top">Bawtry Total</th>
            <th align="center" valign="top">£</th>
            <th align="center" valign="top">Chain Mens</th>
            <th align="center" valign="top">£</th>
            <th align="center" valign="top">Chain Ladies</th>
            <th align="center" valign="top">£</th>
            <th align="center" valign="top">Chain Total</th>
            <th align="center" valign="top">£</th>
            <th align="center" valign="top">Internet Mens</th>
            <th align="center" valign="top">£</th>
            <th align="center" valign="top">Internet Ladies</th>
            <th align="center" valign="top">£</th>
            <th align="center" valign="top">Internet Total</th>
            <th align="center" valign="top">£</th>
            <th align="center" valign="top">Total</th>
            <th align="center" valign="top"> £</th>
            <th align="center" valign="top">Average</th>
            </tr>
        </thead>
        <tbody>
        <tr>

        <!-- Table body contents -->

目前，这会显示具有默认主题的表格，但向下滚动页面时标题不会保持固定。

任何帮助将不胜感激。

谢谢。

更新

我让它在小提琴中工作 - 请参阅此处http://jsfiddle.net/4mVfu/3386/

但是，一旦我将相同的代码添加到我的页面并在 XAMPP 中运行，它就不起作用了。我真的不确定发生了什么错误？

【问题讨论】：

它在这里工作jsfiddle.net/AmanVirdi/4mVfu/3383
@AmanVirdi - 真奇怪！我已经完全复制了你的结构，用我自己的 PHP/MYSQL 循环替换了填充内容，但它仍然不起作用。我将上传我的代码副本减去小提琴上的 MYSQL 查询并很快分享。
@AmanVirdi - 请参阅上面的更新。有任何想法吗？谢谢
@AmanVirdi - 绝对没有。我真的很困惑。

标签： html tablesorter

【解决方案1】：

看起来您正在尝试使用 jQuery v1.2.6。我知道我在文档中添加了 stickyHeaders 小部件支持 jQuery v1.2.6+，但是在错误修复/更新的某个地方，我停止尝试/关心/担心支持超过 6 年的版本。

所以，如果你真的需要支持 v1.2.6，我会尝试隔离问题，否则更新到 jQuery v1.4+ (demo)，我会更新文档。

$('table').tablesorter({
    widgets: ['zebra', 'columns', 'stickyHeaders'],
    usNumberFormat: false,
    sortReset: true,
    sortRestart: true
});

【讨论】：

大声笑，你知道，我的强迫症发作了，我发现了问题。所以现在stickyHeaders 小部件再次与jQuery v1.2.6 一起使用。该修复程序可在我的仓库的working branch 中找到。
是的——这就是问题所在。我已更改为使用版本