Download "Unobtrusive sortable table" script

Demo

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

Table syntax

This script is very easy to set up. First you create your table. Example:

<table id="myTable">
  <colgroup>
    <col id="col1_1"></col>
    <col id="col1_2"></col>
    <col id="col1_3"></col>
    <col id="col1_4"></col>
    <col id="col1_5"></col>
  </colgroup>
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Position</td>
      <td>Income</td>
      <td>Gender</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>37</td>
      <td>Managing director</td>
      <td>90.000</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Susan</td>
      <td>34</td>
      <td>Partner</td>
      <td>90.000</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>David</td>
      <td>29</td>
      <td>Head of production</td>
      <td>70.000</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Laura</td>
      <td>29</td>
      <td>Head of marketing</td>
      <td>70.000</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Kate</td>
      <td>18</td>
      <td>Marketing</td>
      <td>50.000</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

It's important that you give your table an "id"(example: <TABLE id="myTable">). The table should also have a <THEAD> and a <TBODY> tag. <THEAD> is used to identify the table header. The <TD> tags here are the ones you can click on to sort the table. The content of the <TBODY> tag is the sortable part of your table.

The <COLGROUP> is used to highlight the column you're table is sorted by. This is an effect you can add by adding css rules to the highlightedColumn class.

Initialize the script

A Javascript function "initSortTable" is used to make your table sortable. You call this function on a line below your HTML table. This function takes two arguments.

  • ID of table = The id of your table(example:"myTable" for <TABLE id="myTable">)
  • An array indicating how to sort your table. Possible values: "S" = String, "N" = Numeric, false = No sort)

This is an example of how this function can be called:

<script type="text/javascript">
initSortTable('myTable',Array('S','N','S','N','S'));
</script>

Highlight current column

It's possible to add highlight effects to the column the table is sorted by. This is very simple. Just add some css effects to the css class "highlightedColumn",
example:

.highlightedColumn{
  background-color:#CCC;
}

Comments

pet


Greater by simplicity.
Thank you.
pet at 11:14AM, 2011/06/25.
Dave
Elegant. I think it would be better with a sort direction icon at the right edge of the column head.
Dave at 03:00AM, 2013/05/29.
Manuel
dont move the last row please!! my englis is bad
Manuel at 12:49AM, 2013/10/09.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com