Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<table class="tablesorter"> 
    <thead> 
        <tr>
            <th>#</th>
            <th>First Name</th> 
            <th>Last Name</th> 
            <th>Age</th> 
            <th>Total</th> 
            <th>Discount</th> 
            <th>Date</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>1</td>
            <td>Peter</td> 
            <td>Parker</td> 
            <td>28</td> 
            <td>$9.99</td> 
            <td>20%</td> 
            <td>Jul 6, 2006 8:14 AM</td> 
        </tr> 
        <tr> 
            <td>2</td>
            <td>John</td> 
            <td>Hood</td> 
            <td>33</td> 
            <td>$19.99</td> 
            <td>25%</td> 
            <td>Dec 10, 2002 5:14 AM</td> 
        </tr> 
        <tr> 
            <td>3</td>
            <td>Clark</td> 
            <td>Kent</td> 
            <td>18</td> 
            <td>$15.89</td> 
            <td>44%</td> 
            <td>Jan 12, 2003 11:14 AM</td> 
        </tr> 
        <tr> 
            <td>4</td>
            <td>Bruce</td> 
            <td>Almighty</td> 
            <td>45</td> 
  ...

JavaScript

// add custom numbering widget
$.tablesorter.addWidget({
    id: "numbering",
    format: function(table) {
        var c = table.config;
        $("tr:visible", table.tBodies[0]).each(function(i) {
            $(this).find('td').eq(0).text(i + 1);
        });
    }
});

$("table").tablesorter({
    theme: 'blue',
    // prevent first column from being sortable
    headers: {
        0: { sorter: false }
    },
    // apply custom widget
    widgets: ['numbering']
});