jQuery Tablesorter Uncaught TypeError: Cannot set property 'count' of undefined

Question

I'm using the jQuery TableSorter plugin and get the following error Uncaught TypeError: Cannot set property 'count' of undefined with this code:

$(document).ready(function () {
    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;
    });
});

and the HTML is:

<div class="uiGrid">
    <div class="uiGridHeader">
        <!-- NEW HEADER GOES HERE -->
    </div>
    <div class="uiGridContent">
        <table class="list sortable">
            <thead>
                <tr>
                    <th scope="col"><input type="checkbox" id="checkall" /></th>
                    <th scope="col">Name</th>
                    <th scope="col">Post Code</th>
                    <th scope="col">SIC Code</th>
                    <th scope="col">&#8470; of Employees</th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
<!-- ROWS -->

The reason I copy the Table Header is because I need to have the header split off for the structure of my app to work. This part is fine BUT because the classes etc get added to the original headers I need to keep updating the HTML with the new ones again this works fine. But I get the error? Any ideas why or how to fix it? Thanks

Answer 1

There are three problems. The index is returning -1, setting the HTML each time removes the events you have bound to the head, and because you are triggering the sorton event you need to keep track of the direction yourself.

Here is my code, I hope this helps.

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

function bindClick() {
     $(".uiGridHeader th").click(theadClick);
}

var direction = 0;
function theadClick() {
    if(direction) {
        direction = 0;
    } else {
        direction = 1;
    }

    var index = $(this).index();
    var sorting = [[index, direction ]];
    $(".uiGridContent table").trigger("sorton", [sorting]);

    var FindcopyThead = $(".uiGridContent thead").html();
    var NewcopyThead = '<table><thead>' + FindcopyThead + '</thead></table>';
    $(".uiGridHeader").html(NewcopyThead);
    bindClick();
}

bindClick();