jQuery Tablesorter на две таблицы

Для моих таблиц у меня есть фиксированный заголовок и прокручиваемые данные. Это достигается за счет использования двух таблиц и переноса данных в div с автоматическим переполнением (это связано с тем, что <tbody> не может иметь прикрепленную к нему прокрутку).

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

Я хочу использовать что-то вроде подключаемого модуля jQuery TableSorter: http://tablesorter.com/, НО, поскольку у меня есть два таблицы, это не работает... Как мне заставить его работать?

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

Вместо этого я пытался связать два, используя:

$('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();
            });
        });

Но все равно не работает...

РЕДАКТИРОВАТЬ:

Основываясь на ответе ниже, я попытался сделать так, чтобы он обновлял HTML на лету:

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

Но при клике получаю ошибку: Uncaught TypeError: Cannot set property 'count' of undefined