jQuery Animated Table Sorter



Downloaded 9,463 times

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:

Feel free to leave me any comments or questions.

43 comments on jQuery Animated Table Sorter

  1. Jordan Barría-Pineda says:

    Dear Matan,

    First of all thanks for this plugin, I combined it with d3 visualizations and it works great!
    However I found an error in the implementation of the file tsort.js. According to the documentation in this webpage, you have to add to each th element the attr “data-sortBy” for specifying if the sorting criteria (text or numeric or nosort), but in the file tsort.js it looks for the attr “data-sort” and not “data-sortBy”. For that reason the plugin was not sorting in the right way, so you have to change the line 69 …switch ( $(this).attr(‘data-sort’) ) {… for … switch ( $(this).attr(‘data-sortBy’) ) { … Hope I help you with this comment, for avoiding future users problems.

    Best regards

  2. Dilip Nikam says:

    Is it possible to sort table on default column on page load ?

    Also if its better if we can grammatically sort column asc or desc.

  3. Mujahid says:

    table fixed width is Criticle issue.

  4. Mike says:

    Hi , great plug in…, but i have a question for you, can i play the animation automatically by year or film, every 20 second, its this posible just tell me and how its the cost.

    This is because i have a lot information to show…


  5. Hello, excellent plugin!

    Would you tell me if its possible to change the sort from asc to desc? tnx so much for your help!

  6. Gedeon says:

    i am defiantly donating for this coooooooooool work :)

  7. Alex Houben says:

    Thanks for this very nice plugin! The effects are very smooth and professional.
    Perhaps a option to filter would be a nice to have!

  8. Vaki says:

    awesome man ! thank you for this !

  9. Lore says:

    Very pretty!

    I could use one that works with Bootstrap style pagination on table. I’m looking at Tablecloth and Fuel UX, but one has no pagination and the other is too complicated for a designer.

  10. alidad says:

    hi, i love your pagination with animate, i want to use all of those animate, but i only have one way to change class name for animate.
    I’m trying to find other way without change animate code, i have tried with click button to change class name in table .. for sample like (table.tablesorter.fade).removeclass() and replace with other class like to (table.tablesorter.sliedleft) it does not working… do you have any how how that works to change class name by click buttons!

    please let me know thanks.


  11. Meneses says:

    Great job!

    I have only one question: It’s possible to set a secondary order column?

    Like the example table on page…

    When I order by IMDB I like to set Film as secondary order criteria…

    Sleeper and Deconstructing Harry has the same IMDB. I like to put this order ASC. Or to set any other criteria when 2 or more values are the same.


  12. James Wilson says:

    I am greatly impressed with your tableSort plugin. I would very much like to use it in my new website, but I have a couple of concerns.

    1. Is there anyway to strip the rows? Several of the tables I generate have in excess of 100 entries. Stripping greatly helps from a visual standpoint. If I strip the rows initially then the table really looks weird after a sort.

    2. Again since most of my tables must be constrained to height I almost always need to set the scroll to auto. Doing so thus causes the header to scroll off the table when scrolled. I have taken care of this issue by placing the header in a configuration and then the data table in a similar but separate configuration. So, is there anything that you can do/recommend to not have the header scroll with the data.

    Thanks for a great plugin.


  13. Farhad Irani says:

    Hi there,

    I’m very happy with this plugin. Thank you so much, so simple to integrate and so amazing to the display.

  14. GF says:

    Is there any way to make the initial click on a column list it in descending order if it is numeric?

  15. yyy says:

    Negative values are sorted improperly – minus sign seems to be ignored.

  16. batel says:

    hey you :)
    first, thanks a lot for this demo and for the download, its very good and beautiful effect.
    second, i have got some problem and i hope you can answer me,
    in these table i want to add more information that is open on CLICK for every row. like a movies table. the problem is that i need to add the accordion jquery effect and the tablesort dose not work together. can you help me plese to fix that? thanks a lot!!! Batel

  17. jonahree says:

    Lovelyyyyyyyyyyy!!!!!!!!!!!!!!! Three thumbs up, most unique table i have so far met

  18. Kelly says:

    This is really useful and a very nice table :)

  19. Herbert says:

    Lovely plugin!! Been playing around with it and it’s awesome.

  20. Allan Kent says:

    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?

  21. Caner says:

    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.

  22. Anneke says:


    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

  23. Zé Miguel says:

    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.

  24. Nori says:

    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.


  25. Noam says:

    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.


      • Noam says:

        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


  26. Mani says:

    Great Job. Keep it up!

  27. Damodar says:

    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.

        • Damodar says:

          Thank you very much Matan :)
          Is it possible to keep fixed the headers of a long table?

          • Damodar says:

            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.

            • Damodar says:

              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.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>