Making tables sortable using Javascript

Get the table class and id right

To be sortable, a table needs to have its class set to listing, and to have an unique id. Ids should be unique anyway:

  <table class="listing" id="uniqueid">

Get the table structure right

You have to use thead and tbody to contain headers and cells.

A complete sortable table is shown below:

  <table class="listing"
         id="sortable">
    <thead>
      <tr>
        <th>Table header</th>
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>

What if I don't want to sort the table?

If you don't want to sort your table, but still want to use the listing class for layout, the simplest thing to do is not giving the table an id:

  <table class="listing">

or you could add nosort to the table class:

  <table class="listing nosort" id="uniqueid">

or adding nosort class and removing the unique id:

  <table class="listing nosort">

What if I don't want certain columns to be sortable?

Set the table header class to nosort in the table header of the column you don't want to sort:

  <th class="nosort">

Can I have more than one sortable table on a page?

Sure you can. That is why the id of each table has to be uniqe. All tables of class listing with unique ids will be sortable.