Jquery tablesorter addParser two headers rows sorter-false

Question

I have a table with two header rows. The columns are in pairs - one column with short description, the other with long description. The first header row simply says "Expand" or "Shrink" in each column. When the user clicks "Expand" (or "Shrink") in the first header row, the javascript will toggle the columns with the short and long descriptions.

The second header row has the Name of each column.

I want the table to sort when the user clicks on the second header row, but NOT when he clicks on the first header row. When he clicks on the first header row, it should expose/hide the correct columns, but NOT sort.

I can accomplish this if I set the class on the cells in the first header row to "sorter-false".

Here's the problem. I added a parser using addParser. Each cell has an attribute named "data-sort-value". I then called $(table).tablesorter() and passed the headers parameter for each column - like this -

        $("#tbl").tablesorter({
            theme: 'myTheme',
            headers: {
                0: { sorter: 'myparser' },
                1: { sorter: 'myparser' },
                2: { sorter: 'myparser' },
                3: { sorter: 'myparser' },
                4: { sorter: 'myparser' }, etc.

The "sorter-false" class no longer prevents sorting when the column has been assigned "myparser".

Any way to do have it not sort on the first header row cells if the column has a parser?

Answer 1

I don't think that would work on the original version of tablesorter. It will ignore the second header row.

But, if you are using my fork of tablesorter, you can set it up as follows (demo):

HTML

<table class="tablesorter">
    <thead>
        <tr>
            <th class="sorter-false">AlphaNumeric</th>
            <th class="sorter-false">Numeric</th>
            <th class="sorter-false">Animals</th>
            <th class="sorter-false">Sites</th>
        </tr>
        <tr>
            <th class="sorter-myparser">AN</th>
            <th>N</th>
            <th>An</th>
            <th>S</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-sort-value="abc 123">abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        ...
    </tbody>
</table>

Script

$(function () {

    $.tablesorter.addParser({
        // use a unique id
        id: 'myparser',
        is: function () {
            return false;
        },
        format: function (s, table, cell, cellIndex) {
            return $(cell).attr('data-sort-value');
        },
        // flag for filter widget (true = ALWAYS search parsed values;
        // false = search cell text)
        parsed: true,
        type: 'text'
    });

    $('table').tablesorter({
        theme: 'blue'
    });

});

And actually if that is all your parser does... in the latest version, you can set the textAttribute option and accomplish the same thing without a custom parser (demo):

$(function () {

    $('table').tablesorter({
        theme: 'blue',
        textAttribute: 'data-sort-value'
    });

});