Static Rows widget for jQuery Tablesorter

I was using the fantastic jQuery Tablesorter plugin at work the other day and needed to keep a single “actions” row at the bottom of the table. I found the “Widget” tutorial and quickly knocked up a new widget that ensured my actions row stayed at the bottom when the columns were sorted, and then added the tidy-up job to my todo list.

So here it is. I tidied up the widget I created and allowed any rows to be marked as “static” by simply adding the “static” class to the <tr> tag.

Hopefully this will be of use to someone out there, as I found nothing while searching for something similar last week.

If you do use this widget, please let me know how you got on and if you find any bugs, please report them!

Download from GitHub

About these ads

14 thoughts on “Static Rows widget for jQuery Tablesorter

  1. Thanks for this great widget. It was exactly what i was looking for. I implement a dropbox-like filesystem on my website and i don’t want the rows representing folders get sorted with the rest of the file rows. Thanks again.

    Reply
    • Hi, sorry for the delay in replying. I’ve taken a quick look and at first glance, it seems that the pager removes rows and then adds the next “page” of rows, which definitely breaks my static rows widget. I don’t have the time to investigate any further today, but hopefully I can take another look soon; I don’t think a fix is impossible, although don’t hold me to that!

      Reply
  2. Really great widget — just what I was looking for — thanks!

    One problem I’m having though is when I want the last row to always remain the last row, even when I add a row to the table dynamically after an Ajax call. When the widget is initialized it saves the row position, and then keeps the row in that position during a sort. The problem is that after I add the row, the “last” row is in the same position it was before, but that position is no longer at the end of the table, because the table length has changed.

    I couldn’t figure out a way to do it, so I added a little hack to the end of the format() function in the widget. After the normal sorting is done, it looks for a row with the class “static-last” and then moves that row to the end of the table. I’m sure you could come up with a more elegant solution — if so, please let me know.

    Thanks!
    Russell

    (insert the following lines just before the end of the format() function)

    $(‘tbody .static-last’, table).each(function() {
    var row = $(this).detach();
    row.appendTo($(‘tbody’, table));
    });

    Reply
  3. Sorry I haven’t replied to any of the comments yet – I’ve just moved house and most things are still in boxes, including my brain! Things should hopefully calm down a little over the coming weeks, so an update may yet happen… watch this space

    Reply
  4. Hi, thank you for this very, very useful code :-)

    As Russell G. above, I encountered an issue with ajax tables: My loaded page has a table, I apply tablesorter on it, then later, using ajax I replace this table with another one then I apply tablesorter on that new table.

    The issue is the following: the static row simply disappears :-p

    I fixed your code by replacing the flag “this.hasSorted” with “table.hasSorted”; I think this fix should be fine ;-) Do you agree? And if so, would you implement it so other people can benefit from it?

    Cheers

    Reply
  5. Right – I know I’ve slept on this, and everybody here has probably moved on and no longer has any need for this code! I’ll be trying to push an update today to include vlakoff’s code above, and to try and solve Russell G’s problem also (probably just using the code you provided!)

    If anyone fancies saving me the work and issuing a pull request on GitHub, feel free!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s