jQuery tablesorter: How to disable sorting on a column by using a class instead of "inline JSON"?

Question

I am using the jQuery tablesorter plugin. I know how to disable sorting on a column by using the jQuery Metadata plugin:

<th class="{sorter: false}">Don't sort me</th>

But I would rather do this by setting a class, so I don't have to use an additional plugin. Also I think I would remember the class name easier than remembering this JSON syntax. How can I do the same same thing using this syntax:

<th class="not-sortable">Don't sort me</th>

Answer 1

You shouldn't have to modify the source of the plugin. Assuming your th class for not sorting is called nosort:

function setupTablesorter() {
    $('table.tablesorter').each(function (i, e) {
        var myHeaders = {}
        $(this).find('th.nosort').each(function (i, e) {
            myHeaders[$(this).index()] = { sorter: false };
        });

        $(this).tablesorter({ widgets: ['zebra'], headers: myHeaders });
    });    
}

Answer 2

I agree, inline JSON was weird. If you're using tablesorter v2.3 or later, you can actually use data roles to do the same thing - and not have to use the metadata plugin:

<th data-sorter="false">...</th>

Much cleaner. Note, however, that it requires jQuery.

For more info & a demo: http://mottie.github.io/tablesorter/docs/example-parsers-jquery-data.html

All the best!

• Ben

Answer 3

I think the only way to get this to work is modifying the source code of the plugin.

At jquery.tablesorter.js, Line 483:

function checkHeaderMetadata(cell) {
   if (($.metadata) && ($(cell).metadata().sorter === false)) {
       return true;
   };
   return false;
}

Change this code to:

function checkHeaderMetadata(cell) {
   if ((($.metadata) && ($(cell).metadata().sorter === false)) || $(cell).hasClass("not-sortable")) {
       return true;
   };
   return false;
}

Now the function checkHeaderMetadata is also returning true, if the cell has a class named not-sortable.

Answer 4

As of version 2.0.x you can decide at initialisation, which column to not sort.

Add a property called headers and foreach desired column the property sorter with the value false. Counting columns starts at 0.

jQuery('#element').tablesorter({
    headers: {
        // first column
        0: {
            sorter: false
        },
        // third column
        2: {
            sorter: false
        }
    }
});

Example taken from the docs.