Chapter 19Tablesorter

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>

Get Web Development with jQuery now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial