Since I switched to using client side sorting for my tables via the tablesorter.js plugin created by Christian Bach, the one thing I have missed from the server side method I was using before is the highlighting of the sorted columns. It took a while to figure out how to remedy this, but I think I finally did it by creating my own widget for the plugin.

If your not familiar with the tablesorter.js plugin, you might want to check out my previous posts:

• Client Side ASP.NET ListView Sorting via jQuery TableSorter Plugin Demo
• Client Side Table Sorting, Paging and Filtering with jQuery Demo
• Checkbox Parser and Bug Fix for jQuery TableSorter Plugin

Now that you have a better idea of what the plugin can do, lets move on to today's post where I am going to demonstrate the sorted column highlighting widget that I have created.

Live Demo | HTML File Download or ASPX Download

Screenshot of Final Product:

jQuery for Widget:

    //Sorted Column Highlight Widget by Bill Beckelman http://beckelman.net
    //Requires sortedeven and sortedodd classes in your CSS
    ts.addWidget({
        id: "columnHighlight",
        format: function(table) {
            $("td", table.tBodies[0]).removeClass("sortedeven").removeClass("sortedodd");
            var ascSort = "th." + table.config.cssAsc;
            var descSort = "th." + table.config.cssDesc;

            $(table.tHead[0]).find(ascSort).add($(table.tHead[0]).find(descSort)).each(function() {
                $("tr:visible", table.tBodies[0]).find("td:nth-child(" + ($("thead th", table).index(this) + 1) + ")")
                    .filter(':even').addClass("sortedeven").end()
                    .filter(':odd').addClass("sortedodd");
            });
        }
    });  

The widget initially removes any of the sortedeven or sortedodd classes from the cells of the table that might be leftover from a previous sort. Variables containing the ascending or descending classes designated in the plugin for the header cells when the table is sorted are then set. The widget finds the header cells that have these ascending or descending classes and figures out the indexes of these columns. Finally it adds the sortedeven or sortedodd class to the cells of the column(s) as appropriate.

jQuery Functions/Methods Used:

• removeClass -This function removes a given CSS class or the whole class attribute from the elements that match the selector(s).
• find(expr) -Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process.
• add(expr) - Adds more elements, matched by the given expression, to the set of matched elements.
• :nth-child(index/even/odd/equation) - Matches all elements that are the nth-child of their parent or that are the parent's even or odd children.
• index(subject) - Searches every matched element for the object and returns the index of the element, if found, starting with zero.
• addClass - This function adds a CSS class to a given element.

How to Use the Widget:

Add the code for the widget to the end of the tablesorter.js file before the last line "})(jQuery);". The download contains a modified tablesorter.js file if you have questions. Once you have added the widget, you only need to do two more things.

1. Make sure to call the widget when you setup the sorting for the table by adding "columnHighlight" to the list of widgets. Follow the example below: 

   $("#tableOne").tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra', 'columnHighlight'] })
       .tablesorterPager({ container: $("#pagerOne"), positionFixed: false });

2. Add sortedeven and sortedodd classes to your CSS file. As an example:

   table.yui td.sortedeven
   {
       background-color:#EDF5FF;        
   }
   table.yui td.sortedodd
   {
       background-color:#DBEAFF;            
   }

So far the widget is working with at least FF3, IE7 and Chrome with the pager plugin and multiple tables. I may of missed something though so please let me know in the comments what could be changed/improved. Be sure to checkout the live demo and the download.

Share this post: