Sortable-Tables-Js

Posted by Helmut_pdorf on 15 Mar 2012 14:49, last edited by Ed Johnson on 07 Dec 2014 03:17

Tags: sort sortable-tables

rating: +3+x
This howto describes with an example how to create sortable tables ( by clicking on their header) in Wikidot pages.
(using the solution outside of Wikidot: http://www.kryogenix.org/code/browser/sorttable/ )
NOTICE: THIS IS WORKING NOW! ( Helmut_pdorfHelmut_pdorf )

Neccessary:

1) a file attached to this page downloaded from the above link : (sorttable.js) ( see the doubble tt!) - click on file page edit buttons) at the bottom to see it)

2) a table - either in wikidpot simple source or expanded..

3) a html version of this ( put it from the browser source code!) with class="sortable" for the first row , cells

4) an iframe / html using the html-code of the table AND n the head section the attached javascript )
( http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js
and voilá - it works!

Example Table:

|| **Name** || **Salary** || **Extension** || **Start Date** || **Start Date(American)** ||
|| Bloggs, Fred|| $12000.00 || 1353 || 18/08/2003 || 08/18/2003||
|| Shakespeare, Hamnet || $9000 || 9005 || 01/01/2002 || 01/01/2002 ||
||Mbogo, Arnold || $32010.12 || 2755|| 09/08/1998 || 08/09/1998 ||
|| Fitz, Marvin|| $3300 || 5554|| 22/05/1995 || 05/22/1995 ||
|| Turvey, Kevin|| $191200.00|| 2342 || 02/05/1979 || 05/02/1979||
|| Shakespeare, Bill|| $122000.00 ||3211|| 12/11/1961 || 11/12/1961 ||
|| **TOTAL** || $369510 ||  ||  ||  ||
Gives:
Name Salary Extension Start Date Start Date(American)
Bloggs, Fred $12000.00 1353 18/08/2003 08/18/2003
Shakespeare, Hamnet $9000 9005 01/01/2002 01/01/2002
Mbogo, Arnold $32010.12 2755 09/08/1998 08/09/1998
Fitz, Marvin $3300 5554 22/05/1995 05/22/1995
Turvey, Kevin $191200.00 2342 02/05/1979 05/02/1979
Shakespeare, Bill $122000.00 3211 12/11/1961 11/12/1961
TOTAL $369510

Same table sortable:

(Click on the headers! ´1. click - sorted ascending, 2. sorted descending)

How is this done ?

Have a look on the hmtl output of the table above ( the code related to the table above is shown under the point 2) - you can do this with a right mouse click on this/your page menu "view/show quell/source code"

1) Copy the HTML - source code from the browser
2) find the table start and end and copy it into such a "code block" ([[code type="HTML"]] ) for better control:

(2. code block on this Page)

<table class="wiki-content-table">
<tr>
<td><strong>Name</strong></td>
<td><strong>Salary</strong></td>
<td><strong>Extension</strong></td>
<td><strong>Start Date</strong></td>
<td><strong>Start Date(American)</strong></td>
</tr>
<tr>
<td>Bloggs, Fred</td>
<td>$12000.00</td>
<td>1353</td>
<td>18/08/2003</td>
<td>08/18/2003</td>
</tr>
<tr>
<td>Shakespeare, Hamnet</td>
<td>$9000</td>
<td>9005</td>
<td>01/01/2002</td>
<td>01/01/2002</td>
</tr>
<tr>
<td>Mbogo, Arnold</td>
<td>$32010.12</td>
<td>2755</td>
<td>09/08/1998</td>
<td>08/09/1998</td>
</tr>
<tr>
<td>Fitz, Marvin</td>
<td>$3300</td>
<td>5554</td>
<td>22/05/1995</td>
<td>05/22/1995</td>
</tr>
<tr>
<td>Turvey, Kevin</td>
<td>$191200.00</td>
<td>2342</td>
<td>02/05/1979</td>
<td>05/02/1979</td>
</tr>
<tr>
<td>Shakespeare, Bill</td>
<td>$122000.00</td>
<td>3211</td>
<td>12/11/1961</td>
<td>11/12/1961</td>
</tr>
<tr>
<td><strong>TOTAL</strong></td>
<td>$369510</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Now lets mark the header-fields as sortable and the root (TOTAL) as not sortable row

3) insert before the table:
<html>
<head>
<script type="text/javascript" src="http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js"></script>
</head>
<body>

4) CHANGE the table to class="sortable" !
<table class="sortable">

5) Insert into the table
(Notice that this is not neccessary if you have NO FOOT of the table ( "TOTAL" ) which should not be sorted )

<thead>
…. header row
</thead>
<tbody>
… body rows
</tbody>
<tfoot>
… footer row ( TOTAL)
</tfoot>

6) Insert AFTER the table:
</body>
</html>

Used Code block

The 3. code block looks now this:

<html>
  <head>
    <script type="text/javascript" src="http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js"></script>
   </head>
  <body>
<style type="text/css">
th, td {
  padding: 3px !important;
}
/* Sortable tables 
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}
*/
</style>
<table class="sortable">
<thead>
<tr>
<td><strong>Name</strong></td>
<td><strong>Salary</strong></td>
<td><strong>Extension</strong></td>
<td><strong>Start Date</strong></td>
<td><strong>Start Date(American)</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>Bloggs, Fred</td>
<td>$12000.00</td>
<td>1353</td>
<td>18/08/2003</td>
<td>08/18/2003</td>
</tr>
<tr>
<td>Shakespeare, Hamnet</td>
<td>$9000</td>
<td>9005</td>
<td>01/01/2002</td>
<td>01/01/2002</td>
</tr>
<tr>
<td>Mbogo, Arnold</td>
<td>$32010.12</td>
<td>2755</td>
<td>09/08/1998</td>
<td>08/09/1998</td>
</tr>
<tr>
<td>Fitz, Marvin</td>
<td>$3300</td>
<td>5554</td>
<td>22/05/1995</td>
<td>05/22/1995</td>
</tr>
<tr>
<td>Turvey, Kevin</td>
<td>$191200.00</td>
<td>2342</td>
<td>02/05/1979</td>
<td>05/02/1979</td>
</tr>
<tr>
<td>Shakespeare, Bill</td>
<td>$122000.00</td>
<td>3211</td>
<td>12/11/1961</td>
<td>11/12/1961</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>TOTAL</strong></td>
<td>$369510</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
 </body>
</html>

(the style for the table.header is commented out..)

IFRAME the html code - table

This changed code block is the 3. Code block on this page - now wou can have a look on the (same!) table in an "iframe":
[[iframe http://community.wikidot.com/howto:sortable-tables-js/code/3 frameborder="1" align="middle" height="300px" width="550px" scrolling="yes" ]]
gives:

—-

Rate the wish up!

There is on the feedback site a waiting wish for such a solution:
http://feedback.wikidot.com/wish:461/ (Sortable simple tables)

If you want this in an official source of wikidot - than rate it up!

Other used classes

Manually specifying a column's type

Sorttable works out the type of your columns in order to work out how to sort them (numbers sort differently than letters, for example). Occasionally, it might get it wrong. If so, you can explicitly specify a type for a column, which will override sorttable's assessment. To specify a type, add a class of sorttable_columntype to the header row of that column. Available column types are numeric, alpha, ddmm, and mmdd. The latter two are for dates, but are not likely to be useful because if sorttable fails to automatically identify a date then the sort won't work anyway.

So, for example, if you have a "part number" column which you want to be treated as if it were numeric, then you might do your table like this:
<table class="sortable">
<tr>
<th class="sorttable_numeric">Part number</th><th>Part name</th>
</tr>
<tr>
<td>111-A5</td><td>Three-eighths Gripley</td>
</tr>
<tr>
<td>31337-H4X0R</td><td>Computer system intrusion toolkit</td>
</tr>
</table>
Remember: you probably do not need to do this. It is unlikely that you'll need to "force" sorttable to recognise a column type. You may also want to investigate using custom sortkeys, above, as a better way of achieving your goals.

Using custom date formats

One common question with sorttable is how to make it handle custom date formats. Sorttable will have a try at understanding dates in whatever format you add them in, but it sometimes needs help. The way to do this is with custom sort keys, as mentioned above. If you have table cells like this:
<td>February 11th 2008, 1.19pm</td>
change them by adding a custom sort key in YYYYMMDDHHMMSS format:
<td sorttable_customkey="20080211131900">February 11th 2008, 1:19pm</td>

The YYYYMMDDHHMMSS format for the date in the custom key will sort properly, and sorttable will use the information in the custom key rather than the information in the table cell itself.

For other information look at the original site of Stuart Langridge: http://www.kryogenix.org/code/browser/sorttable/#customkeys

Related articles

Comments

Add a New Comment
sortsortable-tables
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.