Tablesorter demo

All options included, as well as the uitheme widget

by chrisloughnane

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.bootstrap.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<table id="job-entries-table" class="tablesorter table">
    <thead>
        <tr>
            <th>Language</th>
            <th class="full-view filter-false {sorter: false}">Id</th>
            <th class="filter-false">Source string</th>
            <th class="filter-false">Translated string</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3">French</td>
            <td class="full-view">001</td>
            <td>Test string 1</td>
            <td>é_Test string 1</td>
        </tr>
        <tr class="tablesorter-childRow">
            <td class="full-view">002</td>
            <td>Test string 2</td>
            <td>é_Test string 2</td>
        </tr>
        <tr class="tablesorter-childRow">
            <td class="full-view">003</td>
            <td>Test String 3</td>
            <td>é_Test String 3</td>
        </tr>
        <tr>
            <td rowspan="3">German</td>
            <td class="full-view">001</td>
            <td>Test string 1</td>
            <td>é_Test string 1</td>
        </tr>
        <tr class="tablesorter-childRow">
            <td class="full-view">002</td>
            <td>Test string 2</td>
            <td>é_Test string 2</td>
        </tr>
        <tr class="tablesorter-childRow">
            <td class="full-view">003</td>
            <td>Test String 3</td>
            <td>é_Test String 3</td>
        </tr>
    </tbody>
</table>

CSS

@media (max-width: 470px) {
     .full-view {
        display: none;
    }
}

JavaScript

$.extend($.tablesorter.themes.bootstrap, {
    table: 'table table-bordered',
    header: 'bootstrap-header', // give the header a gradient background
    sortNone: 'bootstrap-icon-unsorted',
    sortAsc: 'icon-chevron-up',
    sortDesc: 'icon-chevron-down'
});
$(document).ready(function () {
    $("#job-entries-table")
        .tablesorter({
        theme: "bootstrap",
        cssChildRow: 'tablesorter-childRow',
        headerTemplate: '{content} {icon}',
        emptyTo: 'bottom',
        sortLocaleCompare: true,
        widgets: ["zebra", "uitheme", "resizable"],
        widgetOptions: {
            zebra: ["even", "odd"],
        }
    });
});