How to sort a data table such as a FogBugz error table

Question

Has anyone ever seen fogbugz sort their tables? When you click to sort a column, they actually split the table into many small tables, each of which contains information.

I wonder if anyone knows how they do it?

Looking for an implementation of this function.

If you look at the cases page and sort, you can see what I mean.

Any help would be AWESOME!

Still do not understand this.

EDIT: @Peter, I don't want to go back and recreate the table every time the header lights up for sorting. I also want to know if this is a general solution for this. If I click on the header for sorting, then by javascript it splits the “one” table into many, and I want to know if this is a common solution for them, because this is just the best way to view the sorted table.

EDIT: I need a javascript sorter, but if you look directly at the fogbugz implementation, this will lead to a different result ...

Answer 1

Yup, Rich got it (I have long coded this function in FogBugz).

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

Honestly, this will be a pretty cool modification to this jQuery plugin: http://tablesorter.com/docs/ , and you can use a lot of their work. If you intend to set the time and create a common solution, it will also make it available to the community.

Answer 2

Without knowing exactly how Fog Creek does it, the way I do it is to display the table title, then iterate over the list, display the footer and new header every time the group value changes.

Answer 3

Not sure which answer you expect. To do this, the SQL query would simply use the ordering in the selected column, and the user interface launches a new table every time this value changes.

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

http://img297.imageshack.us/img297/6974/76755363ee3.png

Of course, starting a new table does not make sense for each column (heading, case #).

---

Edit: if I understand correctly, you are looking for a way to do this in a browser without loading a new page. If so, I would suggest at least some server-side support that will return your data in the correct order and structured correctly for subtitles (in xml / json / what you use). Your javascript will use this data to recreate the tables. I am sure that other users with extensive website experience will provide you with better answers.

Answer 4

I used Kryogenix's Sortable Tables script with good results.

Answer 5

I don’t know if this is relevant, but we save the query results in a temporary table in SQL, and then refer to the current row-less-one to see if the category has changed, and specify this in resulset.

In some cases, we “point” it to a column containing

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

so that the web page can simply “paste” this into the table that it creates.

 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