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

本文介绍了如何使用tablesorter stickyheaders小部件 - 不工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图将stickyHeaders小部件作为tablesorter插件的一部分来实现时遇到问题。我遵循了我通过Stackoverflow和其他网站找到的每个教程的说明，但似乎没有任何效果。

这是我的标题 code：

 < head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
 
< title>销售报告< / title> 
< link href =admin_style.css =stylesheettype =text / css> 
 
 < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js>< / script> 
 
< link href =tablesorter / css / theme.dropbox.css =stylesheet> 
< script src =tablesorter / js / jquery.tablesorter.min.js>< / script> 
< script src =tablesorter / js / jquery.tablesorter.widgets.min.js>< / script> 
< script> 
 $函数（）{
 $（'table'）。tablesorter（{
 widgets：['zebra'，'columns'，'stickyHeaders']，
 usNumberFormat： false，
 sortReset：true，
 sortRestart：true 
}）; 
}）; 
< / script> 
< / head>

BODY HTML

 < table id =tableclass =tablesorter-dropboxborder =0cellpadding =4cellspacing =0> 
< thead> 
< tr> 
< th align =centervalign =top>品牌< / th> 
< th align =centervalign =top> Bawtry Mens< / th> 
< th align =centervalign =top>£< / th> 
< th align =centervalign =top> Bawtry Ladies< / th> 
< th align =centervalign =top>£< / th> 
< th align =centervalign =top> Bawtry Total< / th> 
< th align =centervalign =top>£< / th> 
< th align =centervalign =top> Chain Mens< / th> 
< th align =centervalign =top>£< / th> 
< th align =centervalign =top> Chain Ladies< / th> 
< th align =centervalign =top>£< / th> 
< th align =centervalign =top> Chain Total< / th> 
< th align =centervalign =top>£< / th> 
< th align =centervalign =top>互联网人< / th> 
< th align =centervalign =top>£< / th> 
< th align =centervalign =top>互联网女士< / th> 
< th align =centervalign =top>£< / th> 
< th align =centervalign =top> Internet Total< / th> 
< th align =centervalign =top>£< / th> 
< th align =centervalign =top> Total< / th> 
< th align =centervalign =top> £< /第> 
< th align =centervalign =top>平均值< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr>

目前，这会显示默认主题的表格，但滚动时标题不会保持不变在页面下方。

任何帮助将不胜感激。

谢谢。

更新

我让它在小提琴中工作 - 请参阅

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

解决方案

它看起来像你试图使用jQuery v1.2.6 。我知道我在文档中提到了stickyHeaders小部件支持jQuery v1.2.6 +，但是在错误修复/更新的某处，我停止尝试/关心/担心支持6年以上的版本。

因此，如果您确实需要支持v1.2.6，我会尝试隔离问题，否则请更新到jQuery v1.4 +（），然后我会更新文档。

  $（'table'）。tablesorter（{
 widgets：['zebra'，'columns'，'stickyHeaders']，
 usNumberFormat：false，
 sortReset：true ，
 sortRestart：true 
}）;

I'm having problems trying to implement the stickyHeaders widget as part of the tablesorter plugin. I've followed the instructions per tutorials that I've managed to find through Stackoverflow and other sites but nothing seems to work.

Here's my header code:

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

At the moment this displays the table with the default theme but the header doesn't stay fixed when scrolling down the page.

Any help would be appreciated.

Thanks.

UPDATE

I have it working in a fiddle - see here http://jsfiddle.net/4mVfu/3386/

But once I add the same code to my page and run in XAMPP it doesn't work. I'm really not sure what's happening error-wise?

解决方案

It looks like you're trying to use jQuery v1.2.6. I know I put in the documentation that the stickyHeaders widget supports jQuery v1.2.6+, but somewhere along the line in the bug fixes/updates I stopped trying/caring/worrying about supporting a version that is over 6 years old.

So, if you really need to support v1.2.6, I'll try to isolate the issue, otherwise update to jQuery v1.4+ (demo), and I'll update the docs.

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

这篇关于如何使用tablesorter stickyheaders小部件 - 不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！