Question

我在尝试将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>

BODY 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中运行，它就无法运行。我真的不确定发生错误的是什么？

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

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

1 个答案: