digg

Facebook Connect Join Digg About

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

Who dugg this? Made popular Dec 22, 2006

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

22 Comments

show profanity settings
expand all
  • 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.
  • 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.
  • 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/
  • iterrell, on 10/12/2007, -2/+4And Dojo's: http://archive.dojotoolkit.org/nightly/tests/widget/test_FilteringTable.html
    Example: http://www.svnhostingcomparison.com/
  • inactive, 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
  • 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, -5/+7Bah! This one is MUCH better. http://friedcellcollective.net/js/SortedTable/examples.html
  • 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.
  • 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.
  • 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.
  • 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.
  • 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)
  • 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!
  • 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.
  • mattkruse, on 02/28/2009, -0/+0The code is contained within two "classes" - Sort and Table (with caps to denote "classes"). There shouldn't be any name collisions with other libraries or code.
    I am currently starting an effort to update and enhance the code, as well as create better examples and documentation.
  • FridayUK, on 02/24/2009, -0/+0Matt: This is a great library, head and shoulders above many of the others posted (some of which seem to be dead). The design is logical and it is lightweight. The demo pages and examples, while very helpful, are not quite as slick as some sites, but this should not fool you, it's very nice library.

    My only criticism is that the it's not defined in a parent object ("class", to the extent they exist in JavaScript) and the names for methods used are very common, causing it to conflict with other sorting libraries (such as some sortable implementations).

    frankcow: With regard to when you should to client v. server side paging, not every table is 3 million rows (and even then you can still fetch the current rows from the server using client side logic). If all you have are a couple of hundred rows it can be quicker just to implement spitting them out and rendering them client side.

    Sometimes - when working with small data sets - server side paging is slower and more intensive on the client and the server. It's all a matter of context. many systems put caps on the number of results a query can return at once in that model client side paging makes a lot of sense.
  • devinasander, on 10/12/2007, -0/+0check this one: it has autofilter too: http://www.viala.hu/html/tablesort.html
  • 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?
  • eternalstudent, on 10/12/2007, -1/+0Previously covered here:

    http://digg.com/design/Exhibit_lightweight_data_publishing_framework
  • 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.
  • ozerwb, on 10/12/2007, -5/+2This library offers the key functionality that is typical

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...


© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.