How to use tablesorter stickyheaders widget - not working?

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?

Solution

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