@Patrick:

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.

First of all:
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

@Dan:
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

@James:

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.

Great mod of a great tool. Anyway I can filter the data? A widget perhaps?
Thanks!

How would I add an "expand all/collapse all" link at the top of the table?
Thanks

Thanks. This is a great mod!
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;
});

@Rick:

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.

how would you make it so just one row can be expanded, so if you click on expand button from another one previous just closes?

@Carlos:

You'd need to modify the $a.bind("click", function (){}) function to trigger the "click" handler for every anchor that's not the current anchor. You'd need something like:

$("td.collapsible a").filter(function (){return this !== $a[0]}).addClass("expanded").click();

This should find all the anchors, but the currently clicked item and toggle it's status to collapsed. (I did not actually test this code. If doesn't work exactly, it should be pretty close.)

Note that this method could be really slow on large tables though.

@Mike:

My guess is if you load the JS libraries in the main container (and not within the template you call with <cflayout>) you can get things to work.

I suspect there definitely is a way to get things working and you may run into similar problems with other libraries as well.

@Mike:

You'll need to trigger code when the cflayout window is opened that will actually attach the behavior to the table. There should be some JS variables that are exposed which allow you to run JS code when the layout window gets opened.

@Ryan:

Thanks! At this time, I don't require the functionality in the project I'm working on, so I have no plans to add it. You could definitely write something to do row highlighting. I know there are several jQuery plug-ins out there already that do row/column highlighting. You'd probably need to modify those plug-ins to support multiple rows being seen as a single row, but they'd give you a good head start.

For the cflayout error, I've been trying to find a solution and came across this blog entry that might help:
http://www.justanaverageyo.com/index.cfm/2008/1/17...

@Kurt: would you be interested in adding this code to my current project? If yes, please contact me for details and give me an idea on costs. subs at i2tsolutions dot com Thanks!

nm. works great, I was doing something wrong. Thanks for the great plugin!

I have the same call going to different tables in an html page. Is there a way to shorten/combine elements like this so each one toggles independently yet doesn't take 6 lines?


$('#table-products1').columnManager({listTargetID:'targetcol1', hideInList: [1,2,3,4], colsHidden: [5]}); var opt = {hide: function(c){ $(c).fadeOut(200); }, show: function(c){ $(c).fadeIn(500); }};
$('#table-products2').columnManager({listTargetID:'targetcol1', hideInList: [1,2,3,4], colsHidden: [5]}); var opt = {hide: function(c){ $(c).fadeOut(200); }, show: function(c){ $(c).fadeIn(500); }};
$('#table-products3').columnManager({listTargetID:'targetcol1', hideInList: [1,2,3,4], colsHidden: [5]}); var opt = {hide: function(c){ $(c).fadeOut(200); }, show: function(c){ $(c).fadeIn(500); }};
$('#table-products4').columnManager({listTargetID:'targetcol1', hideInList: [1,2,3,4], colsHidden: [5]}); var opt = {hide: function(c){ $(c).fadeOut(200); }, show: function(c){ $(c).fadeIn(500); }};
$('#table-products5').columnManager({listTargetID:'targetcol1', hideInList: [1,2,3,4], colsHidden: [5]}); var opt = {hide: function(c){ $(c).fadeOut(200); }, show: function(c){ $(c).fadeIn(500); }};
$('#table-products6').columnManager({listTargetID:'targetcol1', hideInList: [1,2,3,4], colsHidden: [5]}); var opt = {hide: function(c){ $(c).fadeOut(200); }, show: function(c){ $(c).fadeIn(500); }};

Tablesorter is relly good.

However, as a CF programmer I am quite new to Jquery. I got Tablesorter to work with CF pulling data from mySQL but I can't seem to get the Expand/Collapse ( Kab ) and the Row Highlight ( David ) to work. It's the HTML call to the functions I suspect. I would really appeciate any help in getting these working.

Nice one Dan. Great peice of coding.

@Michael:

I think you may need change the tablesorter code further to make sure that only tr that are direct descendants of the table/tbody take are sorted (ie. "> tr".) I'm not sure how well the tablesorter code works with nested tables, because I've never tried it.

@Michael:

I believe Christian implemented most of my changes in his source code, but I don't think he's ever released a new version of the code.

Hi all

I have a small query. I need a table, i have a column in that table containing a link. On clicking on that link the rows should expand between that row and the next row.

can anyone help?

Hi,
I am still working on my table (since november). The goal is to present a table and display the last column only if the user is privileged to see it. If the user is credentialed then a input button will display which allows the user to toggles on and off the last column.
I have something which works on IE but not on FF.
Has anyone successfully done this? Dan - would you be able to look at the code if i send it? Desperate...
Thanks...

hi dan, great mod, perfectly suited my needs :-)

however, after putting it to use in a number of places, i have encountered a problem that i can't resolve. basically i have a table with a number of tabs above it (manifested by a <ul>). these tabs when clicked repopulate the table by pulling some data via AJAX. however, once a tab has been clicked the functionality of table sorter is lost - even if i go back to the "original" tab, i.e. the one that is selected on page load. the only way to get the functionality back is to refresh the page in the browser.

any idea what might be causing this, and any possible solutions? i've been recommended livequery but i couldn't get that to solve the problem. THANKS!

@nick

Dan's mod should resemble the same functionality that you can achieve with the original tablesorter.

Look at: http://tablesorter.com/docs/example-ajax.html

You probably need to do the following:
$("table").trigger("update");

@nick than it sounds like you are overwriting the entire table which is unbinding the tablesorter events.

You need to look at how you are modifying your table on each tab click or you will have to re-initialize the tablesorter by calling the table.tablesorter(configSettings) on every tab click.

Is there a way to expand a particular row by default e.g. 1st and the 3rd?

Hi Dan,
I like your works a lot. I've used the collapsible and very happy with it.
I current have a issue with collapsed row on nested tables. It works fine with a first rows, but when I nested tables within rows, when I click on the (+) of a first row all rows inside expanded, I have to double click on the (+) to get it collapse back.

=== jquery===
<script type="text/javascript">
$(document).ready(
function (){
$(".tablesorter")
//td.collapsible = collapse to the first table row and show +/- td.collapsible_alt = anchor to order number
.collapsible("td.collapsible", { collapse: true })
// do sorting
.tablesorter({
// set default sort column
sortList: [[2,0]], headers: {0: {sorter: false}} //, widgets: ['zebra']
, onRenderHeader: function (){ this.wrapInner("<span></span>");}
, debug: false
})

}
);
</script>

=== html part ===
<table class=tablesorter><thead><tr><th>name</th><th>address</th></tr></thead><tbody>
<tr><td rowspan=2 class=collapsible></td><td>name_1</td><td>address_1</td><tr>
<tr class='expand-child'><td colspan=5>
<table ><thead><tr><th>class</th><th>description</th><th>teacher</th><tr></thead><tbody>
<tr><td rowspan=2 class=collapsible></td><td>class_1</td><td>description_1</td><td>teacher_1</td><tr>
<tr><td rowspan=2 class=collapsible></td><td>class_2</td><td>description_2</td><td>teacher_2</td><tr>
</tbody></table>
<//tbody></table>

The problem is when I click on the (+) next to name_1, I see both class_1 and class_2 rows and the (+) sign. when I double click on (+), it is collapsed. Do you have any idea?

Thanks,

Hi Dan,

Thank you very much for your comments. Here is what I have changed on

<script type="text/javascript">
$(document).ready(
function (){
$(".tablesorter")
//td.collapsible = collapse to the first table row and show +/- td.collapsible_alt = anchor to order number
.collapsible(">tbody >tr >td.collapsible", { collapse: true })
.collapsible(">tbody >tr >td >tbody >tr >td.collapsible", { collapse: true })
// do sorting
.tablesorter({
// set default sort column
sortList: [[2,0]], headers: {0: {sorter: false}} //, widgets: ['zebra']
, onRenderHeader: function (){ this.wrapInner("<span></span>");}
, debug: false
})
// do paging
.tablesorterPager({container: $("#pager"), positionFixed: false}) ;
}
);
</script>

.collapsible(">tbody >tr >td.collapsible", { collapse: true }) ==> is for outer most table
.collapsible(">tbody >tr >td >tbody >tr >td.collapsible", { collapse: true }) ==>inner table

The outer rows are working OK, the inner row are not collapsed.

@Linh:
I know I've made comments in here of some things I did and I did have to alter the source code in certain places. I actually used Christian's tablesorter svn version:2.0.5b that incorporated a lot of Dan's work. You still requires jquery.tablesorter.collapsible.js as well.

Here is a snap shot showing collapsible tables that are sortable and themselves can nest other collapsible tables. http://picasaweb.google.com/lh/photo/S58apsVqEFfKQ... Look at my previous posts in here to see if it helps, but if I have time and when I get to my workstation I'll see if I can post some code for you.

Hi Dan,

I've tried to change something in the 'jquery.tablesorter.collapsible.js' file. It is not get better, it is not working at all. because I am new with jquery, maybe.

<table ...>
<tr><td class=collapsible></td> ... </tr>
<tr class='expand-child'><td>
<table ...>
<tr><td class=collapsible></td> ... </tr>
<tr class='expand-child'><td>
<table ...>
<tr><td class=collapsible></td> ... </tr>
<tr class='expand-child'><td>
.....
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>

if I have several nested rows/tables like this. How would I change on the plug-in source code? would you please give me a hint? Thanks.

Linh

@Ajay:

There are a couple of examples in the comments, like this one:
http://blog.pengoworks.com/index.cfm/2008/3/28/Fin...

@Ajay:

Just make your selectors more specific like:
$("#tableId > tbody > tr > td.collapsible a").removeClass("expanded").click();

Which would only collapse at the first level of table cells. You're going to need to adapt the selector for you environment, but the basic idea is to make sure that you only grab the specific cells you want to expand/collapse.

@Ajay:

Without seeing an example, it's impossible for me to give you any clues, other than it's probably just a matter of getting your selectors right.

@Ajay:

Your HTML is malformed--so that can definitely affect things. The "id" attribute must be unique and all your inner tables have identical values for the "ids." jQuery will only ever grab the first one.

Also, your inner tables are missing the <tbody> tags.

There are other errors in the HTML as well. I'd recommend running your code through an HTML validator. Once you fix your HTML, you may find it resolves the issues you're having.

Hi,

I got a problem getting tablesorter to work in my page.

I use jQuery 1.3.2 and try to add sort to two tables that are contained within a main table.

The selector for jQuery works and the debug info also seems correct but I do not get any result.

Built headers:,2ms
[]
column:0 parser:text column:1 parser:text column:2 parser:digit
Building cache for 3 rows:,0ms
Built headers:,0ms
[]
column:0 parser:text column:1 parser:text column:2 parser:digit
Building cache for 3 rows:,1ms

Pageurl: http://lab.dnet.nu/bugs/?view=todo.todo

All css and js files looks to be loading fine and I get no js errors.

Can any one see any obvious errors?

Great mod to tablesorter plugin - just what I was looking for. Is there any way to put the header for the child rows? I don't really need a header for my parent row, as I'm only displaying two items. The majority of my data will be in the child rows, and I'd like to put a header there//

What I've got it a bunch of parent records - company info, and multiple child records for each parent (not the one-to-one like the example). I want to be able to sort by both the parent and the child records if possible...

Now I'm trying to page everything, and the pager does not seem to display all the data. I know the query is correct because I echo all data to error_log. I have multiple child rows for each parent row. If I don't use the pager.tablesorter plugin, all the data is correct and displayed ok. If I use the pager plugin (which I really need cuz there is lots of data), several child rows are not displayed for each company record, and one company record is not displayed. Anyone seen this before?

@Matt:

The tablesorter mod was not intended to work w/tables populated via AJAX. It only allows the behavior to be bound to a table once, so once you append data to the table via AJAX, there's not a good way to re-bind the behavior.

To accomplish what you want, you'd have to customize my mod further to allow re-binding of new data.

opps...

h[list[i][0]] is not defined
jquery.tablesorter.mod.js (line 411)

Meant in the above example:

[+] Row
.....[+] Row

@Ranga:

State is all stored in the className of the +/- anchors. You can determine the state by examining which class is assigned the anchor.