JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <th>#</th>
            <th>Last Name</th>
            <th>First Name</th>
            <th>Email</th>
            <th>Due</th>
            <th>Web Site</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="">1</a>
            </td>
            <td>Smith</td>
            <td>John</td>
            <td>[email protected]</td>
            <td>$50.00</td>
            <td>http://www.jsmith.com</td>
        </tr>
        <tr>
            <td><a href="">2</a>
            </td>
            <td>Bach</td>
            <td>Frank</td>
            <td>[email protected]</td>
            <td>$50.00</td>
            <td>http://www.frank.com</td>
        </tr>
        <tr>
            <td><a href="">3</a>
            </td>
            <td>Doe</td>
            <td>Jason</td>
            <td>[email protected]</td>
            <td>$100.00</td>
            <td>http://www.jdoe.com</td>
        </tr>
        <tr>
            <td><a href="">4</a>
            </td>
            <td>Conway</td>
            <td>Tim</td>
            <td>[email protected]</td>
            <td>$50.00</td>
            <td>http://www.timconway.com</td>
        </tr>
    </tbody>
</table>
<div id="pager" class="pager">
    <form>
        <img src="images/first.png" class="first" />
        <img src="images/prev.png" class="prev" />
        <input type="text" class="pagedisplay" />
        <img src="images/next.png" class="next" />
        <img src="images/last.png" class="last" />
        <select class="pagesize">
            <option value="">>LIMIT</option>
            <option value="2">2 per page</option>
            <option value="5">5 per page</option>
            <option value="10">10 per page</option>
        </select>
   ...

CSS

table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.png);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.png);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}

JavaScript

$(document).ready(function () {
    $.tablesorter.addWidget({
        // id for widget
        id: "excludeFirstColumn",
        // format is called when the on init and when a sorting has finished
        format: function (table) {
            // loop all tr elements and set the value for the first column	
            for (var i = 1; i <= table.tBodies[0].rows.length; i++) {
                $("tbody tr:eq(" + (i - 1) + ") td:first", table).html(i);
            }
        }
    });

    $("#myTable")
        .tablesorter({
        theme: 'blackice',
        widthFixed: true,
        widgets: ['zebra']
    })
        .tablesorterPager({
        container: $(".pager")
    });
});