jQuery Tablesorter on two tables

For my tables I have a fixed header and scrollable data. This is achived by using two tables and wrapping the data in a div with overflow auto (this is because <tbody> cannot have scrollable attached to it).

<div class="uiGrid">
    <div class="uiGridHeader">
        <table>
            <colgroup>
                <col style="width:29px;text-align:center" />
                <col />
                <col style="width:100px" />
                <col style="width:100px" />
                <col style="width:150px" />
                <col style="width:46px" />
                <col style="width:62px" />
            </colgroup>
            <thead>
                <tr>
                    <th scope="col"><input type="checkbox" id="checkall" /></th>
                    <th scope="col"><a href="#">Name</a></th>
                    <th scope="col">Post Code</th>
                    <th scope="col"><a href="#">SIC Code</a></th>
                    <th scope="col"><a href="#">&#8470; of Employees</a></th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="uiGridContent">
        <table class="sortable">
            <colgroup>
                <col style="width:29px;text-align:center" />
                <col />
                <col style="width:100px" />
                <col style="width:100px" />
                <col style="width:150px" />
                <col style="width:46px" />
                <col style="width:62px" />
            </colgroup>
            <tbody>
                <!-- DATA ROWS GO HERE -->
      开发者_运维问答      </tbody>
        </table>
     </div>

I'm wanting to use something like the jQuery TableSorter plugin: http://tablesorter.com/ BUT because I have two tables it doesn't work... How would I get it working?

$("table.sortable").tablesorter({
            headers: {
                0: { sorter: false },
                5: { sorter: false },
                6: { sorter: false }
            }
        });

Instead I've been trying to bind the two using:

$('table').tablesorter().bind('sortEnd', function ()
        {
            var $cloneTH = $('.uiGridHeader th');
            var $trueTH = $('uiGridContent th');
            $cloneTH.each(function (index) {
                $(this).attr('class', $($trueTH[index]).attr('class'));
            });
        });

        $('.uiGridHeader th').each(function (index) {
            var $cloneTH = $(this);
            var $trueTH = $($('.uiGridContent th')[index]);
            $cloneTH.attr('class', $trueTH.attr('class'));
            $cloneTH.click(function () {
                $trueTH.click();
            });
        });

But still not working...

EDIT:

Based on answer below I have attempted to make it so that it updates the HTML on the fly:

var copyThead = $(".uiGridContent thead").html();
    copyThead = '<table><thead>' + copyThead + '</thead></table>';

    $(".uiGridHeader").html(copyThead);
    $(".uiGridContent table").tablesorter();
    $(".uiGridContent table thead").hide();

    $(".uiGridHeader th").click(function () {

        // Get updated HTML
        var FindcopyThead = $(".uiGridContent thead").html();
        var NewcopyThead = '<table><thead>' + FindcopyThead + '</thead></table>';

        $(".uiGridHeader").html(NewcopyThead);

        var index = $(".uiGridHeader th").index(this);
        var sorting = [[index, 0]];
        $(".uiGridContent table").trigger("sorton", [sorting]);
        return false;
    });

But I get an error on the click: Uncaught TypeError: Cannot set property 'count' of undefined

---

In my opinion you should create a REAL structured table (have the inside the data table.

Then i would use jQuery to copy the thead and make a duplicate to #uiGridHeader with the content, and hide the "original", and then you can use tablesorters external sorting to do the trick http://tablesorter.com/docs/example-trigger-sort.html

Would that be possible as an soloution? Ill try it on fiddle :)

Got something working:

http://jsfiddle.net/cARZz/