Web Development with jQuery (2015)
Part III. Popular Third-Party jQuery Plugins
Chapter 19. Tablesorter
The Tablesorter plugin is a popular third-party jQuery plugin available from http://www.tablesorter.com. The plugin does what the name implies; the plugin is attached to any <table> element that you like, and then it can sort that table's columns, one or more at a time. For example, you can sort by name only, by name and then by age, or by name, age, and then by date. How many columns are sorted is entirely up to you.
The $.tablesorter() plugin allows for some configuration and customization; whatever isn't covered in this chapter explicitly is documented both on the Tablesorter website at http://www.tablesorter.com as well as in Appendix T, “Tablesorter.”
Sorting a Table
The $.tablesorter() plugin is straightforward. It functions well out-of-the-box and dropped in a document; with only a call to the plugin's method and some styling, you can be off sorting tables in no time.
The following example (Example 19-1 in the code downloads at www.wrox.com/go/webdevwithjquery) sets up the basic, out-of-the-box $.tablesorter() plugin:
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Tablesorter</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='../Tablesorter/Tablesorter.js'></script>
<script src='Example 19-1.js'></script>
<link href='Example 19-1.css' rel='stylesheet' />
</head>
<body>
<table>
<colgroup>
<col style="width: 100px;" />
<col />
<col style="width: 150px;" />
</colgroup>
<thead>
<tr>
<th>
Track #
<span class='tableSorterDescending'>↓</span>
<span class='tableSorterAscending'>↑</span>
</th>
<th>
Name
<span class='tableSorterDescending'>↓</span>
<span class='tableSorterAscending'>↑</span>
</th>
<th>
Album
<span class='tableSorterDescending'>↓</span>
<span class='tableSorterAscending'>↑</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Come Together</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>2</td>
<td>Something</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>3</td>
<td>Maxwell's Silver Hammer</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>4</td>
<td>Oh! Darling</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>5</td>
<td>Octopus's Garden</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>6</td>
<td>I Want You (She's So Heavy)</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>7</td>
<td>Here Comes The Sun</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>8</td>
<td>Because</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>9</td>
<td>You Never Give Me Your Money</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>10</td>
<td>Sun King</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>11</td>
<td>Mean Mr. Mustard</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>12</td>
<td>Polythene Pam</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>13</td>
<td>She Came In Through The Bathroom Window</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>14</td>
<td>Golden Slumbers</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>15</td>
<td>Carry That Weight</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>16</td>
<td>The End</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>17</td>
<td>Her Majesty</td>
<td>Abbey Road</td>
</tr>
<tr>
<td>1</td>
<td>Drive My Car</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>2</td>
<td>Norwegian Wood (This Bird Has Flown)</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>3</td>
<td>You Won't See Me</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>4</td>
<td>Nowhere Man</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>5</td>
<td>Think For Yourself</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>6</td>
<td>The Word</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>7</td>
<td>Michelle</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>8</td>
<td>What Goes On</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>9</td>
<td>Girl</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>10</td>
<td>I'm Looking Through You</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>11</td>
<td>In My Life</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>12</td>
<td>Wait</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>13</td>
<td>If I Needed Someone</td>
<td>Rubber Soul</td>
</tr>
<tr>
<td>14</td>
<td>Run For Your Life</td>
<td>Rubber Soul</td>
</tr>
</tbody>
</table>
</body>
</html>
The preceding HTML is styled with the following CSS:
body {
font: 12px 'Lucida Grande', Arial, sans-serif;
background: #fff;
color: rgb(50, 50, 50);
padding: 20px;
margin: 0;
}
table {
table-layout: fixed;
border: 1px solid rgb(200, 200, 200);
border-collapse: collapse;
padding: 0;
margin: 0;
width: 600px;
}
table th {
text-align: left;
background: rgb(244, 244, 244);
}
table th,
table td {
border: 1px solid rgb(200, 200, 200);
padding: 5px;
}
span.tableSorterDescending,
span.tableSorterAscending {
display: none;
float: right;
}
table th.headerSortDown {
background: rgb(150, 150, 150);
}
table th.headerSortUp {
background: rgb(200, 200, 200);
}
th.headerSortDown span.tableSorterDescending {
display: inline;
}
th.headerSortUp span.tableSorterAscending {
display: inline;
}
Finally, this example is enabled for table sorting using the following JavaScript.
$(document).ready(
function()
{
$('table').tablesorter();
}
);
The preceding example creates the screen shot that you see in Figure 19.1.
Figure 19.1
Figure 19.2 shows how to sort by multiple columns. To do this, sort the first column by clicking the column header; then hold down the Shift key to click a second column header.
Figure 19.2
This example is primarily about setting up the proper HTML and then styling it with CSS. The $.tablesorter() plugin's default functionality provides the rest as soon as it is applied.
You can customize several aspects of $.tablesorter() using the options documented in Appendix T. For example, you can change which keyboard key you have to press to select a second column for sorting using the option sortMultiSortKey. The default value is'shiftKey'; to make it the Option (Mac) or Alt (Windows) key, you would change the value to 'altKey'.
$('table').tablesorter({
sortMultiSortKey : 'altKey'
});
You can also change the class names applied to the <th> elements using the options cssHeader, cssAsc, and cssDesc. The default value of cssHeader is header. The default value of cssAsc is headerSortUp, and the default value of cssDesc is headerSortDown.
$('table').tablesorter({
sortMultiSortKey : 'altKey',
cssHeader : 'tableSorterHeader',
cssAsc : 'tableSorterAscending',
cssDesc : 'tableSorterDescending'
});
Finally, if your table contains additional markup in the table cells, you need to account for the markup using the textExtraction option. The textExtraction option can be the string 'simple' or it can be a callback function. Whatever method you use, it should be as fast and as optimized as possible. The method provided would be slow because it uses jQuery and the numerous chains of function calls that entails.
$('table').tablesorter({
sortMultiSortKey : 'altKey',
cssHeader : 'tableSorterHeader',
cssAsc : 'tableSorterAscending',
cssDesc : 'tableSorterDescending',
textExtraction : function(node)
{
return $(node).text();
}
});
The initial sorting of a table is controlled with the sortList option. This options allows you to provide an array that describes how a table should be sorted after the $.tablesorter() plugin has been applied. The default behavior is to not change the sorting of the table until the user explicitly clicks a header to sort a column. The following example sorts the table by default, the same way it is sorted in Figure 19.2, which is to say, it is first sorted ascending by Album and then sorted ascending by Name.
$('table').tablesorter({
sortList : [
[2, 0],
[1, 0]
]
});
Each column is referenced by number, offset from zero. The first column sorted is the third column. Then you specify ascending or descending by specifying 0 for ascending and 1 for descending. So, [2, 0] sorts the third column ascending, and [1, 0] sorts the second column ascending after that.
Additional options for customizing a $.tablesorter() plugin implementation are available in Appendix T.
Summary
Using the $.tablesorter() plugin is an easy and straightforward experience of adding the plugin's code to your document and then enabling $.tablesorter() on whatever <table> elements you would like to make sortable.
You learned in this chapter that the out-of-the-box experience for sorting tables includes the ability to sort one or more columns. To do this you need little more than the right HTML structure and some CSS.
You learned that the hot key for selecting multiple columns can be customized easily using the sortMultiSortKey option.
You also learned that the various class names that $.tablesorter() uses for <th> elements can be customized using the cssHeader, cssAsc, and cssDesc options.
If you have a more complicated table and use markup in your table cells, you can control how text is extracted from each cell for sorting using the textExtraction option. You can use the 'simple' method, which just takes the content of the cell wholesale, regardless if it includes markup. You can also use a callback function that specifies explicitly how you'd like the text to be extracted. For example, you could walk the DOM yourself and get the text node using JavaScript APIs directly, instead of jQuery.
Finally, the sortList option defines how a table should be sorted by default when the $.tablesorter() plugin is applied.
Exercises
1. How is a table sorted by default?
2. How would you use the Control key on a Mac or Windows keyboard as the key you press when selecting a second column to sort?
3. How would you customize the class names used on the <th> elements by the $.tablesorter() plugin?