21

How can I make a table sortable using javascript without loading data via AJAX? More specifically, I'm looking for a solution that gives me the following:

  • Works on a plain old HTML table
  • Makes columns sortable using a natural comparison
  • Is agnostic of server-side technology (should be portable regardless of whether the tables are being rendered by JSP, PHP, etc)
  • Implemented preferably as an extension to JQuery, which I'm already using in the specific project I'd like to immediately apply this to. I'm open to suggestions involving another javascript framework such as YUI, but it will need to play nice with JQuery.

What I'm not looking for:

  • A solution which requires me to populate the data via an AJAX call. I'd like to apply this in a project that has a number of plain old HTML tables for things like search results that I'd like to quickly make sortable without rewriting any server-side code.
  • Paging.
  • Filtering.
  • The ability to specify arbitrary comparison logic.

I'm purposefully omitting our technology stack for the specific project I'm working on for now, but will include it if people feel that it is absolutely necessary. Again, I'm most interested in solutions that don't involve anything on the server. There are a ton of projects written in all sorts of languages that could use a little love in this area.

Regarding the issue of similar, existing questions on Stack Overflow

I've done some poking around, and the closest question I can find to mine is this one. My requirements are a little different, however, and so I decided to ask a new question.

Improve this question

6 Answers 6

Reset to default
24

The jquery plugin tablesorter works very nicely.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

Tablesorter is a jQuery plugin which works similar to sortable.js, turning a normal HTML table into a sortable one.

Improve this answer

Comments

4

Updated link (note this is not https://github.com/SortableJS/Sortable): Try sortable.

Improve this answer

5 Comments

Pretty old, but very very easy to customise and make work. Sweet
@RedFilter i'm using the sortable.js but it's not working see here
Unfortunately, that link no longer works. Even this blog post from 2007 has a dead link.
This is not about sorting tabular data (anymore?): "Sortable — is a JavaScript library for reorderable drag-and-drop lists ..."
@handle link fixed
1

Along with OrbMan's answer, you can look at wikibits.js, which is MediaWiki's version of the sorting code. It doesn't require any AJAX or special glue code, just a simple class (sortable) to designate sortable tables.

The code is freely licensed, and used in production all over the Wikimedia sites.

EDIT: MediaWiki switched to a version of Tablesorter starting in 86088 (April 2011).

Improve this answer

1 Comment

These links are now outdated.
1

I really like tristen's tablesort. It is dependency free, lightweight and doesn't require a lot of styling / doesn't mess with your own styling!

Improve this answer

Comments

1

  1. Download the sorttable.js

  2. Include the sorttable.js, by putting a link to it in the HEAD of your page, like so:

    <script src="sorttable.js"></script>

  3. Mark your table as a sortable one by giving it a class of sortable:

    <table class="sortable">
Improve this answer

1 Comment

currently located at: kryogenix.org/code/browser/sorttable It's useful if you don't want to use, or are not using jquery.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.