Discover the best of the web!
Learn more about Digg by taking the tour.
Javascript Library for HTML Table Sorting, Filtering, Etc
javascripttoolbox.com — Tabular data in table form is common on web sites and web applications, and a common requirement is to manipulate the data tables on the client side, rather than going back to the server to sort, filter, page, etc. This library offers the key functionality that is typical: sorting, filtering, pagination, alternate row coloring and more
- 1063 diggs
- digg it
- caffiend, on 10/12/2007, -5/+7Bah! This one is MUCH better. http://friedcellcollective.net/js/SortedTable/examples.html
- iterrell, on 10/12/2007, -2/+4And Dojo's: http://archive.dojotoolkit.org/nightly/tests/widget/test_FilteringTable.html
Example: http://www.svnhostingcomparison.com/ - ldhertert, on 10/12/2007, -1/+4If you need more of a grid style control (i.e. editing, inserting/moving/deleting rows, etc) then this is a very impressive libarary: http://scbr.com/docs/products/dhtmlxGrid/
- mattkruse, on 10/12/2007, -1/+0The SortedTable library doesn't seem to be as robust or as fast. There seem to be common cases (colspan's, etc) that will cause it to fail. It does seem to do a fine job, though, and is a slightly different approach.
- GrendelT, on 10/12/2007, -0/+1@caffiend
I used that SortedTable on a project I made last semester... http://www.grabmail.org (for sorting Mail Settings' order)
- iterrell, on 10/12/2007, -2/+4And Dojo's: http://archive.dojotoolkit.org/nightly/tests/widget/test_FilteringTable.html
- ozerwb, on 10/12/2007, -5/+2This library offers the key functionality that is typical
- frankcow, on 10/12/2007, -3/+5this is pretty cool, but I totally disagree with doing the paging on the client side. It should always be done on the server. After all, it would be extremely inefficient to send 3 million rows to a client and let them page 10 at a time
- akkuma, on 10/12/2007, -1/+4What about if you have 1,000 rows? Now I am not going to say this as fact, but I am fairly certain you could find a point where it makes more sense to have client side rather than server side paging. A small set of data that is too hard to view at once makes sense for client side, while your example makes perfect sense for server side.
- malice8691, on 10/12/2007, -0/+2You have to use the best tool for the situation. If you have 3 million rows then you don't use this method. I think the majority of sites are not going to have 3 million rows of data in a grid.
- caffiend, on 10/12/2007, -1/+10@frankcow
if you're sending 3 million rows to a client, your problems are much greater than which sorting option to use. - drmangrum, on 10/12/2007, -1/+3Would probably be best to use a hybrid of some kind a la AJAX. Maybe queue up 3-5 times your pagination amount and dump/add rows as you scroll through each set.
- jasonkohles, on 10/12/2007, -0/+0@drmangrum
If the sorting is being done client side, your hybrid doesn't work, how do you know which entries are going to show up on the current page if you don't have all the entries available so you can sort them? - mattkruse, on 10/12/2007, -0/+1I agree, paging should usually be done server-side or in an ajaxy way. I coded the paging to fill a specific need - a table of about 100 rows to be displayed in a small bit of real estate. In this case, it made more sense to "page" the results than having a scrolling table with locked headers.
Also, table paging can be used to simulate a tabbed interface, or jumping through sets of data (one cell per row, 1 row per page). Without js support, the table will just be a long list of the sets of data and still be very useable.
- eternalstudent, on 10/12/2007, -0/+1What about a library that can generate tables, maps, time lines, thumbnails, etc., with color coding, all from data stored in a JSON file:
http://simile.mit.edu/exhibit/
No database behind the scene. No 3-tier web application. No browser plug-in. Only HTML, Javascript, and CSS.- junk, on 10/12/2007, -0/+1Thanks for the link. I had seen this not too long ago but lost the bookmark. Some very cool ideas there.
- eternalstudent, on 10/12/2007, -1/+0Previously covered here:
http://digg.com/design/Exhibit_lightweight_data_publishing_framework
- nofxjunkee, on 10/12/2007, -0/+1Looks pretty nice. I think I'll stick to Adobe's Spry framework though. All this is possible using it, though parts may be a little more verbose. The thing is that Spry does a lot more than just this; it's an Ajax framework.
If all you need is the table stuff then this is the way to go though. - SilverRocket, on 10/12/2007, -0/+1Worth a digg, as is the rest of Matt's site. I've used his "validations.js" library (form validations) for quite a few projects. Nice and easy, with some very convenient functions.
- devinasander, on 10/12/2007, -0/+0check this one: it has autofilter too: http://www.viala.hu/html/tablesort.html
- mattkruse, on 10/12/2007, -0/+1I've updated this library since the original digg, and it now features sorting, paging, filtering, auto-filtering, etc. Take another look!
Digg is coming to a city (and computer) near you! Check out all the details on our