Finished jQuery Tablesorter mod for Collapsible Table Rows
I've been pretty quite the past two weeks. I've been really plugging away doing a lot of client-side UI programming in jQuery. I'm working on a complete revamp of some portions of our application and than means modernizing the UI.
One of the tasks I needed to accomplish was to create a UI component that would allow for sortable, collapsible table rows. jQuery already has a very good (an official) plug-in for sorting column rows called tablesorter.js. The Tablesorter is part of the jQuery UI project and allows for sorting of multiple columns—which is a really nice feature.
However, the current tablesorter.js codebase does not have anything in place to allow for "children" rows—which is needed to provide a collapsible architecture. Essentially I need a way to tell certain rows that they belong with the row above.
After playing around with some different variations I finally came up with a solution that worked elegantly and had minimal impact on the Tablesorter codebase. The way I solved the problem is to add a class to "children" rows, which tells the Tablesorter plug-in to include the row as part of the last row that does not have the "child" class. This allows me to actually have multiple children rows, that are all grouped together and ignored by the sorting algorithms.
I'm working with Christian Bach to get the mods added to the official codebase—and it looks like that might happen as early as next week. I've upload my Tablesorter mod and an example of implementing collapsible rows.
The example uses the "Pager" add-on for Tablesorter, just to show my mod attempted not to break backwards compatibility.
If you have any comments, please leave them. They will only help me and Christian in the long run.
1422 Views
Send
Print
Comments (16)
Comments
How's the performance with lots of rows of data? Have you seen a 'limit', before slowness occurs?
The majority of overhead is actually in initializing the core table sorting code. My mod to support child rows does not seem to have a huge impact on performance (but I was testing only on a couple hundred rows of data.)
DOM parsing is always going to be problematic when you get in to tens of thousands of elements. I'm not sure what you consider "lots", but if you're getting into 100's of lines of tabular data, you probably want to start thinking about implementing that data in a progressive manor. I mean even just having a browser try to render a table with hundreds or thousands of rows is time consuming--parsing that DOM tree is obviously only going to add more overhead.
So, if you're talking about a reasonable dataset then performance is fine. If you're wanting to load thousands of rows of data, then you really don't want to preload all that data anyway (because that's a ton of data to push to the user.) You really want a solution that will load the data progressively (i.e. via AJAX.) That's going to be more efficient all the way around.
Thanks for sharing your code!
One question:
It seems that your tablesorter-script does not accept header-inline (meta) information.
Meaning: <.... class="{sorter:false}" ....
is not working.
Using the header-Option in the ready-container is in my case not an option.
You have have a solution for this, please let us know :-)
Thanks again!
Cheers, QT
The metadata works fine, I'm using it on the project I originally wrote the mod for. Are you sure you've included the metadata plugin?
Thanks for getting back so quick.
Yes, a metadata-plugin was included (emphasis on *a*).
I noticed that I was using one from Joern ( * Revision: $Id: metadata.js 3465 2007-09-23 21:15:52Z joern.zaefferer $) and not the one from the jquery-repository.
Now it workes like a charm!
Thanks again.
Cheers, QT
two quick questions.
1) how does one not use the +-... Say I want a link to expand my rows...
2) the 'js file makes reference to FX - and I've tried to put show("slow") in the context of the call, but it bombs...
.collapsible( "td.collapsible", { collapse:true },fx: {hide("slow"),show("slow")} )
thanks again.
If you notice, the FX don't work correctly in IE6 (which is why they're just "show" and "hide".) Also, the "fx" argument just takes a string (like "show" or "slideDown") you currently can't specify a speed. However, since IE6 doesn't like to animate table row elements (TR) I never really went forward with completely adding the FX.
As far as using a link, the way the code will work is it'll attach the "expand/collapse" function to the first "link" it finds in the collapsible cell. If there is no link, it creates the a link for you. So, just add a link with whatever verbiage you want to the collapsible cell and the behavior will automatically be attached.
Thanks a million for sharing your update and for closing the deal on completely converting someone over to jquery. I just starting using it (I used the tab UI) and was upgrading my db display to include dependant rows, include sortability and pagination - and what do you know? Found it here with your upgrade and jquery table sort! Koodos - works like a charm, is fast and lightweight!
New fan!
Thanks!
Yeah, you'd need to write a widget. I'm pretty sure I've seen a filtering widget someone wrote for the tablesorter plugin. I'd suggest checking out the jQuery mailing lists.
Thanks
You can do this to toggle the current state for all rows:
$("td.collapsible a").click();
If you want to collapse all do:
$("td.collapsible a").addClass("expanded").click();
If you want to expand all rows do:
$("td.collapsible a").removeClass("expanded").click();
For others interested this is what I have used:
// Expand/Collapse all
$('a#expandCollapse').click(function(){
var linkLabel = this.innerHTML;
switch(linkLabel)
{
case "Expand All":
$("td.collapsible a").removeClass("expanded").click();
this.innerHTML= "Collapse All"
break;
case "Collapse All":
$("td.collapsible a").addClass("expanded").click();
this.innerHTML= "Expand All"
break;
}
return false;
});
Has anyone had any success adding filtering? I have not been able to find a widget to do so, but I do know that filtering was being worked on for the next release of table sorter. Here's the link to his demo: http://motherrussia.polyester.se/pub/jquery/demos/...
I'm not sure where Christian's at as far as filtering goes. It's definitely a feature that's needed to complete with other table sorting modules.