jQuery Tablesorter Cookie Widget

Introduction

I’ve recently been doing some work for a client who had links on each table header which reloaded the page and had php reorder the table contents. Very slow and added alot more work onto the server, not a good idea. I was certain that I had seen javascript based tablesorters some where, and didn’t want to write my own.

Enter tableSorter 1.x a great piece of work by Christian Bach which has the wonderful ability to convert any table with the help from jQuery, into a client side sortable table. I had just one problem with this, when the page was reloaded the table sorting was lost. Enter the even better almighty tablesorter 2.x with added widget support, and custom parsers wow this sound like it was for me, I just needed to make a cookie widget. So I did.

Requirements

Note: It’s worth noting that for this to work correctly each table will need it’s own id. When a table of the same id has the table sorter applied it will sort it in the same way it was previously.

Compatibility

So far the widget has been tested in windows using the following browsers.

The Script 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(function($) {
  $.tablesorter.addWidget({
    id: 'cookie',
    format: function(table) {
      var sortList = table.config.sortList;
      var tablesorterCookieJar = $.cookieJar('tablesorter');
      if ( sortList.length > 0) {
        tablesorterCookieJar.set($(table).attr('id'), sortList);
      } else {
        var sortList = tablesorterCookieJar.get($(table).attr('id'));
        if (sortList && sortList.length > 0) {
          jQuery(table).trigger('sorton', [sortList]);
        }
      }
    }
  });
})(jQuery);

Usage

When starting your tablesorter on a table, you just need to add one little bit to say hey use this widget.

1
2
3
4
5

jQuery(function($) {
  $('.tablesort').tablesorter({
    widgets: ['cookie']
  });
});

Explanation

It’s a very simple widget.

Here the widget is add to tablesorter plugin, using the addWidget method. Passing an object containing and id which is a string a nd a format method. The id is used later to specify that it’s this widget we want to use.

1
2

$.tablesorter.addWidget({
    id: 'cookie',

Here is the bulk of the widget, the format method. This method is called when ever the table gets formatted, this is triggered by the user changing the table sort order or when initialised. tablesorter calls the format method passing in a table object, which contains config data and the actual table data it’s self, this can be manipulated to reformat the table. tableSorterCookieJar gets an instance of the cookieJar object with the name tablesorter, this is to store the table id and sort order of the table.

3
4
5

    format: function(table) {
      var sortList = table.config.sortList;
      var tablesorterCookieJar = $.cookieJar('tablesorter');

If the sortList contains data this means the user triggered an event and the format method of the widget was called, we then simple store this information for later use, using the table id as a way of recognising the table from all rest.

6
7

      if ( sortList.length > 0) {
        tablesorterCookieJar.set($(table).attr('id'), sortList);

Else if the sortList is empty and doesn’t yet contain any sort data it means that the table is being initialised. At this point the widget tries to get the previously stored sort order from the cookieJar. If this was successful it triggers the sorton event which was bound to the table by tablesorter (very handy), it passes the sortList from the previously stored sort order, this sorts the table how it was sorted last time. If no data was found in the cookieJar nothing is done.

8
9
10
11
12
13

      } else {
        var sortList = tablesorterCookieJar.get($(table).attr('id'));
        if (sortList && sortList.length > 0) {
          jQuery(table).trigger('sorton', [sortList]);
        }
      }

I hope this breif tutorial to how the tablesorter plugin widgets work make sense and is of use.

Documentation

Pass the widget id “cookie” as parget of the widgets array when you initialise the tablesorter on a table (see usage example).

Downloads

Downloads

jquery.tablesorter.cookie.example.html
jquery.tablesorter.cookie.js (1.26 KB)
jquery.tablesorter.cookie.pack.js (1.27 KB)
August 13, 2007 | Filed Under jQuery, tablesorterCookieWidget 

Comments

10 Responses to “jQuery Tablesorter Cookie Widget”

  1. Peter Bell on August 27th, 2007 5:33 pm

    Just wanted to say “many thanks”! I’m mainly a back end programmer so today is my first foray into ANYTHING Javascript, but in about an hour I got jQuery, the table sorter, paging and your cookie widget all in and working (it’d have been about 2 minutes but for the n00b mistakes!).

    I’m also hoping to alter your js to store the page number as that is a requirement for some of my clients.

    Firstly, any general pointers for doing this, and secondly if I get my head around it, would you have any interest in a copy of the code to offer as a pagesortcookie widget (I guess it’d be possible to make the widget check to see if paging was being used, but I’ll save that for when I have a clue!).

    Thanks again for a great widget.

  2. Daniel on October 6th, 2007 9:39 am

    I couldn’t understand some parts of this article y Tablesorter Cookie Widget : jDempster.com, but I guess I just need to check some more resources regarding this, because it sounds interesting.

  3. Jean du Plessis on October 8th, 2007 12:46 pm

    Big thank you to you for this widget, it has helped me a lot.

    Like Peter I’m also looking to save the page number and display size of the pager plugin for tablesorter.

    Is it possible alter your widget to also remember the settings for the pager?

  4. Mike on December 8th, 2007 6:47 pm

    Nice job with this…it really comes in handy. I had the same request from my client about preserving the sort order and this resolves the issue.

    I am wondering though if there’s a way to still make this work if one is using an initial sort order for the table. I have found that if I use sortList:[[0,1]], the saved sort order cookie is not used. I only want the default sort list for the first time the table is displayed.

    Thanks again!

    -Mike

  5. letssurf on December 10th, 2007 9:05 pm

    Thanks Mike, I actually did some code for this sometime back, I must have forgotten to release it. link http://code.jdempster.com/jquery/trunk/tablesorter.cookie/jquery.tablesorter.cookie.js

    You just need to specify widgetCookie: sortList: [[0,0]] instead of just sortList in the tablesorter config then tablesorter cookie widget will use that sort order if no saved one is found.

    Hope that helps,

  6. Mike on December 11th, 2007 2:29 am

    Just as a follow-up in case anyone else was wondering how to set the config options on the initial load of the table and still be able to preserve the sortList using James’s nice cookie widget:

    jQuery(function($) {
    $(’#myTable’).tablesorter({
    widgets:[’zebra’,'cookie’],
    widgetCookie: {sortList: [[5,1]]}
    });
    });

    I struggled a bit with the syntax and maybe this will be helpful.

    Happy Sorting!

    -Mike

  7. happz on February 20th, 2008 2:01 pm

    Hi, this widget is EXACTLY what I was looking for (or, what my customers were forcing me to look for :) Thanks a lot, nice work!

  8. Rick on March 13th, 2008 4:46 pm

    Got any demo’s up for this?

    Rick

  9. Goujon on March 20th, 2008 5:58 am

    Hi. Thanks a lot for this wonderful widget(s). But I’m still struggle it trying to make it work along with Tablesorter’s Pager plugin (http://tablesorter.com/docs/example-pager.html). I need to store current page number and sort order, but now it doesn’t work that way. Think some custom code shpuld be written and I’m more like a newcomer to the wonderful jQuery world. Any help would be appreciated. Thanks in advance!

  10. John on May 23rd, 2008 11:39 am

    Thanks a lot for posting this up - I use the tablesorter plugin quite a lot and this is nicely fills in one of the missing gaps.

    Looking forward to giving it a spin. It’s also one of the great things about jQuery that plugins can just be extended like this.

    Cheers

Leave a Reply