Quite often, we need to use tables to present data to the end user. Although they are not frequently used in building user interfaces, there is no better way to display large amounts of data.
The Tablesorter module, which I would like to introduce to you, is based on the functionality of the jQuery JavaScript library, giving it quite powerful features.
To get started, we need to include the jQuery library from the official developers’ website in our document, along with the jquery.tablesorter.min.js file. These are the two essential components required for the Tablesorter module to function properly.
Including required files
To use Tablesorter, we need to include jQuery and the Tablesorter plugin in our document:
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>
Creating the table
Next, we create the table that we want to apply Tablesorter to:
<table id="user_list">
<thead>
<tr>
<th>№ in List</th>
<th>Nickname</th>
<th>Email</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user_1</td>
<td>user_1@gmail.com</td>
<td>29.77</td>
</tr>
<tr>
<td>2</td>
<td>user_2</td>
<td>user_2@gmail.com</td>
<td>29.00</td>
</tr>
<tr>
<td>3</td>
<td>user_3</td>
<td>user_3@gmail.com</td>
<td>59.05</td>
</tr>
<tr>
<td>4</td>
<td>user_4</td>
<td>user_4@gmail.com</td>
<td>2.33</td>
</tr>
</tbody>
</table>
The structure of the table should be exactly like this: it must contain the <table> tag, a <thead> section with <th> headers, and a <tbody> section with the table content.
Activating Tablesorter
After setting up the table, we activate the Tablesorter plugin using the following code:
$(document).ready(function() {
$("#user_list").tablesorter();
});
Clicking on the table headers will now allow sorting the table data.
Setting default sorting
In many cases, you may want to specify a default sorting order. This can be achieved by passing an array specifying the column index and sort direction:
$(document).ready(function() {
$("#user_list").tablesorter({sortList: [[0,1]]});
});
This example sorts the table by the first column in descending order upon loading.
Full example code
<!DOCTYPE html>
<html>
<head>
<title>Tablesorter</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#user_list").tablesorter({sortList: [[0,1]]});
});
</script>
</head>
<body>
<table id="user_list">
<thead>
<tr>
<th>№ in List</th>
<th>Nickname</th>
<th>Email</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user_1</td>
<td>user_1@gmail.com</td>
<td>29.77</td>
</tr>
<tr>
<td>2</td>
<td>user_2</td>
<td>user_2@gmail.com</td>
<td>29.00</td>
</tr>
<tr>
<td>3</td>
<td>user_3</td>
<td>user_3@gmail.com</td>
<td>59.05</td>
</tr>
<tr>
<td>4</td>
<td>user_4</td>
<td>user_4@gmail.com</td>
<td>2.33</td>
</tr>
</tbody>
</table>
</body>
</html>
This article covered the basics of using Tablesorter to manipulate table elements. The plugin can handle various data types, including text, numbers, IP addresses, currencies, and dates. This is just a small portion of what Tablesorter can do, and in the future, I plan to dedicate a series of articles to exploring its full potential.