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

aphextwix 发表于 Dev

蚜虫

我在尝试将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中运行，它就无法工作。我真的不确定在错误方面发生了什么？

莫蒂

您似乎正在尝试使用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
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。