Make any table sortable using Tabelsorter.

Ever wanted to sort a table according to your needs on a website but it was lack of this feature? 

Fortunately there's a pretty nice solution.

Tablesorter is an excellent jQuery plugin created by Christian Bach. It can turn any standard HTML table into a fully sortable table without page refresh.

All we need to do is include the source file and apply it's tablesorter() method on the desired table(s).

Of course, it has a bunch of useful settings which are fairly described in the documentation.

Applying it on a live website

Certainly, tablesorter is a great plugin in itself and can come handy if you need it for your own projects. However it's real power comes to the surface if we use it together with Greasemonkey, a great Firefox add-on.

As a real-life example, we'll use it on http://localize.drupal.org, which is a community hub for translating Drupal projects. The reason is very simple. We would like nations to be ordered by number of untranslated strings.

First we need to make Greasemonkey and jQuery work together. Fortunately Joan Piedra has a nice solution for this.

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        alert($); // check if the dollar (jquery) function works
    }

As we can see all our custom jQuery code gets executed when jQuery is fully loaded. So far so good. Next step is to load and apply tablesorter on desired table(s).

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Add Tablesorter jQuery plugin.
  var GM_TS = document.createElement('script');
  GM_TS.src = 'http://tablesorter.com/jquery.tablesorter.min.js';
  GM_TS.type = 'text/javascript';
  document.getElementsByTagName('head')[0].appendChild(GM_TS);

// Add Custom CSS.
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'http://tablesorter.com/themes/blue/style.css';
  link.type = 'text/css';
  document.getElementsByTagName('head')[0].appendChild(link);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined' || typeof unsafeWindow.jQuery.tablesorter == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
      $(function() {
        // Keep table's original width.
        var originalWidth = $(".l10n-community-overview").css('width');

        // Apply tablesorter.
        $(".l10n-community-overview").tablesorter({sortList: [[2,0]]}).addClass('tablesorter').css('width', originalWidth);

        // Site specific theme tayloring.
        $('.sticky-header').addClass('tablesorter').css('margin-top', '0');
        $(".l10n-community-overview th.header, .sticky-header th").css('padding-right', '21px');
        }
      );
    }

That's it. We load tablesorter plugin (and one of its themes) then apply it on tables that have class l10n-community-overview, by simply calling tablesorter({sortList: [[2,0]]}).
(Note: {sortList: [[2,0]]} is a configuration object with which we order by column #3, ascending.)

Full Greasemonkey script can be downloaded here: sort_table.user.js (If you have Greasemonkey installed, just click on the link and hit install.)


(Note: since http://localize.drupal.org is a Drupal site, it already has the jQuery library loaded, so there is no need to add it again in this script.)


Enjoy!