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!

Thanks guys.

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

Not sure what answer do you expect. SQL query for this would simply use ordering on selected column, and UI would start new table each time this value changes.

Here is screenshot of FogBugz with this sorting, after clicking on Priority column.

Of course, starting new table doesn't make sense for every column (title, case #).

---

Edit: If I understand correctly, you're looking for a way how to do this in a browser without loading new page. If this is the case, I would suggest at least some server-side support, which would return your data in correct order, and properly structured for subtables (in xml/json/whatever you use). Your javascript will use this data to recreate tables. I am sure others with more web-ui experience will provide you with better answers.

Answer 2

I've used the Sortable Tables script from Kryogenix with some good results.

Answer 3

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.

Answer 4

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 5

I don't know if it is relevant, but we store the results of a query in a temporary table in SQL, and then reference current-row-less-one to see if a Category has changed, and indicate this in the resulset.

In some instances we "indicate" this with a column containing

<tr><td colspan=999>Category Heading</td></tr>

so that the web page can just "inject" that into the table it is building.

SELECT Col1, Col2, ...,
       [CATEGORY] = CASE WHEN T1.CategoryCol <> COALESCE(T2.CategoryCol, '')
           THEN '<tr><td colspan=999>' + T1.CategoryCol + '</td></tr>'
           ELSE ''
           END
FROM #MyTempTable AS T1
     LEFT OUTER JOIN #MyTempTable AS T2
         ON T2.ID = T1.ID - 1