Sortable Tables

Learn how to make your tables sortable.

Since this process involves editing the page HTML, a basic understanding of HTML is required.

Example

First NameLast NameAge
Clark Kent 35
Bruce Wayne 40
Peter Parker 20
Rob Hood 35
Diana Prince 30
Selina Kyle 25
Tony Stark 50


Table Structure

A sortable table needs to have a table head <thead>.  Since the tables added through our web system don't include a <thead>, you will need to add one.  

In this example, I added a standard Table - Striped with some data in it. I then modified the table structure to include a table head. 

<table border="0" class="table table-striped">
   <thead>
      <tr><th>First Name</th><th>Last Name</th><th>Age</th></tr>
   </thead>
   <tbody>
      <tr>
         <td>Clark</td>
         <td>Kent</td>
         <td>35</td>
      </tr>

 

Make It Sortable

To make a table sortable by it's column headers, add a class of "listing" and a unique ID to the table.

<table border="0" class="table table-striped listing" id="sortable">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>35</td>
</tr>


Making a Column Non-sortable

If you don't want a column to be sortable, simply add a class of "nosort" to the column header.

<table border="0" class="table table-striped listing" id="sortable">
<thead>
<tr><th>First Name</th><th>Last Name</th><th class="nosort">Age</th></tr>
</thead>
<tbody>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>35</td>
</tr>


The Code

Here is the code for the entire table that is shown in the example at the top of the page

<table border="0" class="table table-striped listing" id="sortable">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>35</td>
</tr>
<tr>
<td>Bruce</td>
<td>Wayne</td>
<td>40</td>
</tr>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>20</td>
</tr>
<tr>
<td>Rob</td>
<td>Hood</td>
<td>35</td>
</tr>
<tr>
<td>Diana</td>
<td>Prince</td>
<td>30</td>
</tr>
<tr>
<td>Selina</td>
<td>Kyle</td>
<td>25</td>
</tr>
<tr>
<td>Tony</td>
<td>Stark</td>
<td>50</td>
</tr>
</tbody>
</table>