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

Dalhousie

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

Gemperle

The sorting works BUT for only ONE click... after that further clicks will not work on any columns? Any ideas? thanks – Dalhousie

It seems to work fine on jsFiddle. Maybe do some logging and ensure the event is being fired. – Gemperle

It does work BUT the classes do not change for the headers? Both on the copied HTML and the original HTML. So it's something to do with using .click() – Dalhousie

I assume that it is because you are still reseting the table's html? By doing this you are removing the click event and .data() value. I have updated the jsFiddle with a new copy and I will edit my post. – Gemperle

Still doesn't change the classes for me :/ Does it work for you in the fiddle? – Dalhousie

Yeah the sorting works fine BUT the TH classes don't change when the items are sorted. See tablesorter.com for examples. – Dalhousie

Yep. Sorry it was a very weird one. By going direction = !direction javascript assumes it's true or false not 1 or 0. So when table sorter sets the header it was expecting an index not true or false to get the css class. Check out this on fiddle – Gemperle

Answer 2

I was getting the same error. It took me a minute to figure out that the value you must pass is a three-deep array:

$('table').trigger('sorton', [[[1,1]]]);

As opposed to the initial sorting option:

$('table').tablesorter({
    sortList: [[1,1]]
});

When you add new data to the table be sure to:

$('table').trigger('update').trigger('appendCache');

However, I could not get the tablesorter to play nice after dynamically adding new columns. Instead in those instances I must let jQuery unbind everything so I can re-init:

$('table').remove().appendTo('body').tablesorter({ ...

Merline

for some reason, when I chained the 'update' and 'appendCache' triggers, it didn't work properly. But when I called them separately, they worked. $('table').trigger('update'); $('table').trigger('appendCache'); – Procrustean