javascript, jquery, php, tablesorter, web development, widget
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!
Share this:
From → javascript, jQuery, web development
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.
No problem – I’m glad you found it useful!
dead simple widget. worked perfectly. thanks!
Thanks so much dude, exactly what I was looking for!
Is there anyway to use this widget and the pager widget on the same table?
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!
nillian thank you for the reply. I look forward to a possible solution!
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));
});
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
having a sortList added for an initial sorting, will sort the statics row as well.
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
btw, $(table).data(‘hasSorted’) would be even better
Works great, thanks!!
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!