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">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<div class="external-pager">Go to page: <span></span></div>
<br>

<!-- pager --> 
<div class="pager"> 
        <img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/> 
        <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/> 
        <span class="pagedisplay"></span> <!-- this can be any element, including an input --> 
        <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/> 
        <img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/> 
        <select class="pagesize" title="Select page size"> 
            <option selected="selected" value="10">10</option> 
            <option value="20">20</option> 
            <option value="30">30</option> 
            <option value="40">40</option> 
        </select>
        <select...

JavaScript

var $t = $('table');

$t.on('pagerInitialized pagerChange', function(){
    var t = '', i,  pages = this.config.pager.totalPages;
    for (i = 0; i < pages; i++){
        t += '<button>' + (i+1) + '</button>';
    }
    $('.external-pager span').html(t);
});

$('.external-pager').on('click', 'button', function(){
    $t[0].config.pager.page = parseInt( $(this).text(), 10) - 1;
    $.data($t[0], 'pagerUpdateTriggered', false);
    $t.trigger('sortEnd.pager');
});

$t.tablesorter({

    // *** APPEARANCE ***
    // Add a theme - try 'blackice', 'blue', 'dark', 'default'
    //  'dropbox', 'green', 'grey' or 'ice'
    // to use 'bootstrap' or 'jui', you'll need to add the "uitheme"
    // widget and also set it to the same name
    // this option only adds a table class name "tablesorter-{theme}"
    theme: 'blackice',

    // fix the column widths
    widthFixed: false,

    // Show an indeterminate timer icon in the header when the table
    // is sorted or filtered
    showProcessing: false,

    // header layout template (HTML ok); {content} = innerHTML,
    // {icon} = <i/> (class from cssIcon)
    headerTemplate: '{content}',

    // return the modified template string
    onRenderTemplate: null, // function(index, template){ return template; },

    // called after each header cell is rendered, use index to target the column
    // customize header HTML
    onRenderHeader: function (index) {
        // the span wrapper is added by default
        $(this).find('div.tablesorter-header-inner').addClass('roundedCorners');
    },

    // *** FUNCTIONALITY ***
    // prevent text selection in header
    cancelSelection: true,

    // other options: "ddmmyyyy" & "yyyymmdd"
    dateFormat: "mmddyyyy",

    // The key used to select more than one column for multi-column
    // sorting.
    sortMultiSortKey: "shiftKey",

    // key used to remove sorting on a column
    sortResetKey: 'ctrlKey',

    // false for German "1.234.567,89" or French "1 234 567,89"
   ...