Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make an HTML table sortable with javascript without loading data via AJAX?

Tags:

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.

like image 675
Paul Morie Avatar asked Jun 04 '09 04:06

Paul Morie


People also ask

How do you sort a table in HTML using JavaScript?

Sort Table by Clicking the Headers. Click the headers to sort the table. Click "Name" to sort by names, and "Country" to sort by country. The first time you click, the sorting direction is ascending (A to Z).

How do I add a sortable table in HTML?

How to Make Sortable Tables. Adding the "sortable" class to a <table> element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column's value. Tables must use <thead> and <th> tags for sortable functionality to work.


1 Answers

The jquery plugin tablesorter works very nicely.

like image 165
antony.trupe Avatar answered Oct 07 '22 22:10

antony.trupe