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">
<script src="http://mottie.github.com/tablesorter/js/widgets/widget-output.js"></script>
<label><input data-delivery="p" name="delivery" type="radio" checked /> popup</label>
<label><input data-delivery="d" name="delivery" type="radio" /> download</label>
<button class="download">Get CSV</button>

<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>abc 1</td>
            <td>234</td>
            <td>Ox</td>
            <td>http://www.yahoo.com</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>10</td>
            <td>Girafee</td>
            <td>http://www.facebook.com</td>
        </tr>
        <tr>
            <td>zyx 24</td>
            <td>767</td>
            <td>Bison</td>
            <td>http://www.whitehouse.gov/</td>
        </tr>
        <tr>
            <td>abc 11</td>
            <td>3</td>
            <td>Chimp</td>
            <td>http://www.ucla.edu/</td>
        </tr>
        <tr>
            <td>abc 2</td>
            <td>56</td>
            <td>Elephant</td>
            <td>http://www.wikipedia.org/</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>155</td>
            <td>Lion</td>
            <td>http://www.nytimes.com/</td>
        </tr>
        <tr>
            <td>ABC 10</td>
            <td>87</td>
            <td>Zebra</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
    ...

JavaScript

$(function () {

    var $table = $('table');
    
    $('.download').click(function(){
        // get delivery type
        var delivery = $('input[name=delivery]:checked').attr('data-delivery');
        $table.data('tablesorter').widgetOptions.output_delivery = delivery;        
        $table.trigger('outputTable');
    });

    $table.tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'output'],
        widgetOptions: {
             // set to "json", "array" or any separator
            output_separator: ',',
            // header attrib containing modified header name
            output_dataAttrib: 'data-name',
            // if true, include multiple header rows (JSON only)
            output_headerRows: false,
            // popup, download
            output_delivery: 'popup',
            // all, visible or filtered
            output_saveRows: 'filtered',
            // left double quote
            output_replaceQuote: '\u201c;',
            // if true, include any HTML within the table cell
            output_includeHTML: false,
            // remove extra whitespace before & after the cell content
            output_trimSpaces: true,
            // if true, wrap all output in quotes
            output_wrapQuotes: false,
            // if using popup, set it's dimensions here
            output_popupStyle: 'width=500,height=300',
            // if saving a file, set the file name here
            output_saveFileName: 'mytable.csv',
            // callback executed when processing completes
            // return true to continue download/output
            // return false to stop delivery & do something else with the data
            output_callback: function (data) {
                return true;
            },
            // JSON callback executed when a colspan is encountered in the header
            output_callbackJSON: function ($cell, txt, cellIndex) {
                return txt + '(' + (cellIndex + col) + ')';
            }
       ...