I am going to make
use of a tool for interactively sorting tables called tablesorter, built on
jQuery. The main web site for tablesorter
can be found at http://tablesorter.com/docs/
[1]
Create an html file with a table
For this simple example I am going to first create a very
basic HTML page with a very simple table.
This will be served on an nginx web server I am running locally on my
network.
Here is the code for my simple HTML page.
<html>
<body>
<br/>
<table border="1">
<tr>
<td>First
Name</td>
<td>Last
Name</td>
<td>Age</td>
<td>Hire
Date</td>
</tr>
<tr>
<td>Patrick</td>
<td>Bailey</td>
<td>38</td>
<td>2013-09-18
14:50:22</td>
</tr>
<tr>
<td>Jeff</td>
<td>Jones</td>
<td>22</td>
<td>2012-09-18
09:12:22</td>
</tr>
<tr>
<td>Cindy</td>
<td>Birch</td>
<td>55</td>
<td>2009-01-12
10:00:22</td>
</tr>
</table>
</body>
</html>
|
Here is an image of image of the web page
I want to add the
tablesorter tool to this so I can have an interactive table.
Download tablesorter
The table sorter can be downloaded from
I downloaded and installed the tablesorter code in a folder
called js at the base of my website directory tree.
To download it from the command line run the following
> wget
http://tablesorter.com/__jquery.tablesorter.zip
> unzip __jquery.tablesorter.zip
> rm __jquery.tablesorter.zip
|
This download includes jquery.tablesorter.js and the
jquery-latest.js.
Make sure you can access these files via the web.
Now to update the HTML page, here is my simple update
<html>
<head>
<link
rel="stylesheet" href="/js/themes/blue/style.css"
type="text/css" />
<script
type="text/javascript"
src="/js/jquery-latest.js"></script>
<script
type="text/javascript"
src="/js/jquery.tablesorter.js"></script>
<script
type="text/javascript" id="js">
$(document).ready(function() {
// call the tablesorter plugin
$("table").tablesorter();
});
</script>
</head>
<body>
<br/>
<table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Hire Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Patrick</td>
<td>Bailey</td>
<td>38</td>
<td>2013-09-18
14:50:22</td>
</tr>
<tr>
<td>Jeff</td>
<td>Jones</td>
<td>22</td>
<td>2012-09-18
09:12:22</td>
</tr>
<tr>
<td>Cindy</td>
<td>Birch</td>
<td>55</td>
<td>2009-01-12
10:00:22</td>
</tr>
</tbody>
</table>
</body>
</html>
|
The results of this code are this
The table is in the order it was created, but now if you
click on a column header it will sort by that column.
Looking over the code line by line…
<html>
<head>
<link
rel="stylesheet" href="/js/themes/blue/style.css" type="text/css"
/>
|
This references the blue style that is given by the
tablesorter people. Tablesorter has 2
themes, blue and green.
Here is what green looks like
I like the blue personally,
Or I suppose you could roll your own css files if you want to. This css file applies to the tablesorter
class.
<html>
<head>
<link rel="stylesheet"
href="/js/themes/blue/style.css" type="text/css" />
<script
type="text/javascript"
src="/js/jquery-latest.js"></script>
<script
type="text/javascript" src="/js/jquery.tablesorter.js"></script>
|
This references the jquery and tablesorter javascript files.
This small script says to, on a page load, apply the
tablesorter script to all tables
<script
type="text/javascript" id="js">
$(document).ready(function() {
// call the tablesorter plugin
$("table").tablesorter();
});
</script>
|
This is the part that tripped me up a bit…
I understood the <thead> and <tbody> section, to
distinguish the header row from the column, but I overlooked the <th>
The cells in the header need to be enclosed by
<th> not by the <td> tag.
<table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Hire Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Patrick</td>
<td>Bailey</td>
<td>38</td>
<td>2013-09-18
14:50:22</td>
</tr>
<tr>
<td>Jeff</td>
<td>Jones</td>
<td>22</td>
<td>2012-09-18
09:12:22</td>
</tr>
<tr>
<td>Cindy</td>
<td>Birch</td>
<td>55</td>
<td>2009-01-12
10:00:22</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Sorting only a certain table
If you want to only sort a certain table give it an id and
sort on that id.
Here is an example of my code updated to do this.
<html>
<head>
<link rel="stylesheet"
href="/js/themes/blue/style.css" type="text/css" />
<script type="text/javascript"
src="/js/jquery-latest.js"></script>
<script type="text/javascript"
src="/js/jquery.tablesorter.js"></script>
<script
type="text/javascript" id="js">
$(document).ready(function() {
// call the tablesorter plugin
$("#myTable").tablesorter();
});
</script>
</head>
<body>
<br/>
<table id="myTable"
class="tablesorter">
<thead>
<tr>
<th>First
Name</th>
<th>Last
Name</th>
<th>Age</th>
<th>Hire
Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Patrick</td>
<td>Bailey</td>
<td>38</td>
<td>2013-09-18
14:50:22</td>
</tr>
<tr>
<td>Jeff</td>
<td>Jones</td>
<td>22</td>
<td>2012-09-18
09:12:22</td>
</tr>
<tr>
<td>Cindy</td>
<td>Birch</td>
<td>55</td>
<td>2009-01-12
10:00:22</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Set default sort order
You can set a default sort order. The following will sort the 2nd
column first in an ascending order then the 3rd column in an
ascending order.
server-web-nginx:/www/var/whiteboardcoder/www/tablesorter> cat
test2.html
<html>
<head>
<link rel="stylesheet" href="/js/themes/blue/style.css"
type="text/css" />
<script type="text/javascript"
src="/js/jquery-latest.js"></script>
<script type="text/javascript"
src="/js/jquery.tablesorter.js"></script>
<script type="text/javascript" id="js">
$(document).ready(function() {
// call the tablesorter plugin
$("#myTable").tablesorter({
sortList:[[1,0], [2,0]]
});
});
</script>
</head>
<body>
<br/>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Hire
Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Patrick</td>
<td>Bailey</td>
<td>38</td>
<td>2013-09-18
14:50:22</td>
</tr>
<tr>
<td>Jeff</td>
<td>Jones</td>
<td>22</td>
<td>2012-09-18
09:12:22</td>
</tr>
<tr>
<td>Cindy</td>
<td>Birch</td>
<td>55</td>
<td>2009-01-12
10:00:22</td>
</tr>
</tbody>
</table>
</body>
</html>
|
The results look like this when you first load a page
The Last Name is already sorted in order.
To do a reverse order use a 1 rather than a 0 For example
<script type="text/javascript" id="js">
$(document).ready(function() {
// call the tablesorter
plugin
$("#myTable").tablesorter({
sortList:[[1,1]]
});
});
</script></html>
|
This will order by the second column in reverse order.
References
[1] tablesorter
main page
Accessed
09/2013
No comments:
Post a Comment