How to Sort Data Table like FogBugz Cases Table

Question

Anyone ever see how fogbugz sorts their tables? When you click to sort the column, they actually break the table up into many small tables that have each category of info.

Wondering if anyone knows how they do this?

Looking to implement this feature.

If you take a look through the cases page, and sort you can see what I mean.

Any help would be AWESOME!

Still Haven't figured this one out.

EDIT: @Peter, I don't want to postback and recreate a table every time the header title is clicked for a sort. I also want to know if their is a generic solution for this. If I click on the header to sort, by the way of javascript, it seperates the "one" table into many and I want to know if their is any generic solution for this because its just a MUCH better way of viewing a sorted Table.

EDIT: I do need a javascript sorter, but if you look right down at the implementation of fogbugz, it produces a different result...

Answer 1

Yup, Rich got it (I coded this feature into FogBugz a long while back).

If you have to do this on the client you have no choice but to sort the data, iterate through it generating table row after table row, and every time you hit a new sort value you create a new thead w/ the appropriate information.

To be honest it would be a pretty cool modification to this jQuery plugin: http://tablesorter.com/docs/ and you'd be able to leverage a lot of their work. If you're going to put in the time and create a general solution, might as well make it accessible to the community.

Answer 2

Without knowing specifically how Fog Creek accomplishes this, the way that I would do it is to output a table header, then iterate through the list, outputting a footer and a new header each time the group value changed.