jQuery Animated Table Sorter is a simple html table sorter, with the added benefit of animating the sorting operation.
Have you ever wanted to deliver unexciting content in a very exciting way? Me neither.
However, now we can.
The following table contains selected works of flim director/writer/actor Woody Allen with respective data for each film.
Click on any of the table headers to see this plugin in action.
| Year | Film | Credit Role | Grossed | IMDB | Rotten Tomatoes |
|---|---|---|---|---|---|
| 1977 | Annie Hall | Alvy Singer | $135,852,600 | 8.2 | 98% |
| 2006 | Scoop | Sid Waterman | $12,727,300 | 6.7 | 39% |
| 1973 | Sleeper | Miles Monroe | $82,084,900 | 7.3 | 100% |
| 1979 | Manhattan | Isaac Davis | $126,047,200 | 8.0 | 98% |
| 1975 | Love And Death | Boris Grushenko | $77,746,400 | 7.7 | 100% |
| 2011 | Midnight in Paris | $56,257,700 | 7.8 | 93% | |
| 1982 | A Midsummer Night's Sex Comedy | Andrew | $24,453,100 | 6.6 | 76% |
| 1997 | Deconstructing Harry | Harry Block | $18,046,900 | 7.3 | 71% |
| 1991 | Shadows and Fog | Kleinman | 6.6 | 55% | |
| 2009 | Whatever Works | $5,633,400 | 7.2 | 50% |
Visit the settings page for additional animations.
Visit the changelog page for known issues.
Visit my personal page for author info.
I would love to see your implementation of my plugin, feel free to send me the URL for it:
Hi Matan.
This is really good work.. congratulations!
I love the plugin, it’s doing exactly what it’s supposed to do.
I also have a question.
Is it possible to set a default sorting on page load?
Thanks Allan,
Unfortunately, there isn’t such functionality currently implemented in the plugin.
Matan
Really good plugin but have some issues. Plugin converts table width to fixed size and this situation is creating problem for “100% width” tables.
Table width must be auto, not a fixed value.
Thank you.
Hi
I’m using tablesorter on a table where 2 or 3 rows should stay together through sorting. With the regular tablesorter plugin, this can be achieved with setting the second row to class expand-child.
Is there a possibility you could include this into your plugin?
Thanks in advance
plugin is awesome! It messes my layout though (is changing the width of my table that is set in percentages)
I would like to do a feature request: Date Sorting, and allowing me to specify the format like dd/mm/yyyy
Thanks Miguel,
I probably should have written somewhere that it does mess up the layout. It adds room for the direction arrows for each table header cell. It also sets the table to position: relative, and all the rows to position: absolute to enable the rows to move freely. This behavior however makes all the cells lose their widths and heights because they seem to lose reference of one another. So after adding the space for arrows into the headers it sets a fixed width and height for each cell appropriately in order to preserve the cell structure.
Like most fancy solutions in web development, it is not pretty or clean, but it works.
I would love to implement something like date sorting, which has been on my to-do list since before I published the plugin. Unfortunately I’ve been really busy with work lately and I’m not sure when I’ll be able to get to implement all these great feature requests I have been getting.
However, in the meantime, you can use the data-sortAs attribute on each date cell, sort it numerically and start with the year like 20130105, 20130403. It’s not a perfect solution, but if you have to have something running soon, it’s the only option right now short of changing the code yourself.
Congrats from Japan! You done it!
I have been using Dojo (heavy and slow) just for table expression but guess I would love this with other jQuery plugs.
Do you have any plans for JSON support to generate table with sorting?
Thanks Nori,
I think you should be able to import data in json, format it into a table, and then run the plugin on it once the table is appended into the DOM, if the table structure is correct of course.
Matan
Great feature Matan!!
I’m having a bit problem in getting it to work, I’ve downloaded the plugin and added the script method with the links to where tsort.min is and it still doesn’t work.
Any suggestions ?
Thank’s a lot !
Hey Noam,
Usually if you’re using Firefox I would do something like View Source (ctrl + u), and click the href link to the script to see that it is actually linked right. If you’re using the Firebug plugin you can activate it and check to see if there are any javascript error messages when the page loads.
Either way if you want me to take a look just host the page somewhere and shoot me an e-mail with the address, I wouldn’t mind looking at it to make sure it’s not some kind of weird bug. You can find my contact info under my personal page.
Matan
Thank’s a lot for the swift reply, I’ll try it and if it’s not working, i’ll send you a link.
Thank’s again
Noam
Great Job. Keep it up!
Hi Matan!
Congratulations for your great plugin, I’m testing it in localhost to publish later but I couldn’t run it in IE.
What could I do? Here the log msg:
Error Details page
User Agent: Mozilla/4.0 (compatible; MSIE 8.0, Windows NT 6.1, WOW64; Trident/4.0; SLCC2;. NET CLR 2.0.50727;. NET CLR 3.5.30729;. NET CLR 3.0.30729; Media Center PC 6.0 ,. NET4.0C;. NET4.0E)
Date: Sun, February 17, 2013 3:07:46 UTC
Message: Object does not support this property or method
Line: 14
Character: 183
Code: 0
URI: http://localhost:8080/sevaint/tablesorter/tsort.min.js
Thanks again
Thanks Damodar,
I noticed the plugin currently does not work in IE8 and earlier, I did not spend much time trying to fix this since IE9 is already two years old itself. I might try to fix it in an upcoming release.
I released a new version today that fixes IE8, though I have noticed the plugin gives a jquery error whenever IE is in Quirks Mode, does not matter which version of IE it is.
So make sure you define your Document Type Declaration correctly. I added more info under the Known Issues section of the Changelog.
Thank you very much Matan
Is it possible to keep fixed the headers of a long table?
Thanks
or pagination buttons?
Warm regards
As far as the fixed headers I don’t think I understand what you mean, can you explain or show an example?
I thought about implementing optional pagination, but it won’t be that simple. Since it is possible to have rows of different heights, there’s no guarantee that every page will fit exactly X number of rows. I’d have to figure out what the best way of doing it is. I think my favorite example is the way store.steampowered.com did it. But their rows are all the same height, so their Next and Previous navigation buttons do not move up and down which is important. I’ll have to work on it at some point.
Hi Matan, thanks for the quick reply. I have a big dynamic table with many rows and columns, then a fixed header is very important when you scroll down to know the colum on the visible data.
Example: http://www.tablefixedheader.com/fullpagedemo/ the example #5
Sorry i took so long to reply, I’ve been busy with work lately and I don’t have much free time anymore. It sounds like a nice feature to implement eventually, I’m just not sure when I’ll get to it.
I actually never really thought people would use this on very large tables since I thought trying to animate a hundred rows or more might look confusing to the user or possibly just produce a really choppy animation, but hey, why not.