Tablesorter demo

All options included, as well as the uitheme widget

by Jon Eyrick

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.jui.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.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>
<table class="tablesorter">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
        <tr>
            <th colspan="7" class="ts-pager form-horizontal">
                <button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i>
                </button>
                <button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i>
                </button>	<span class="pagedisplay"></span> 
                <!-- this can be any element, including an input -->
                <button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i>
                </button>
                <button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i>
          ...

JavaScript

$("table").tablesorter({
    theme: "bootstrap",
    widthFixed: true,
    headerTemplate: '{content} {icon}',
    widgets: ["uitheme", "filter", "zebra"],
})
    .tablesorterPager({
    container: $(".ts-pager"),
    cssGoto: ".pagenum",
    output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
});