Tablesorter demo

All options included, as well as the uitheme widget

by Herst

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-editable.js"></script>
<table id="table" class="tablesorter">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Total</th>
            <th>Discount</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr id="db-row-344">
            <td class="no-edit">Peter</td>
            <td>Parker</td>
            <td>28</td>
            <td>$9.99</td>
            <td>20%</td>
            <td>Jul 6, 2006 8:14 AM</td>
        </tr>
        <tr id="db-row-884">
            <td>John</td>
            <td>Hood</td>
            <td>33</td>
            <td>$19.99</td>
            <td>25%</td>
            <td>Dec 10, 2002 5:14 AM</td>
        </tr>
        <tr id="db-row-234">
            <td>Clark</td>
            <td>Kent</td>
            <td>18</td>
            <td>$15.89</td>
            <td>44%</td>
            <td>Jan 12, 2003 11:14 AM</td>
        </tr>
        <tr id="db-row-756">
            <td>Bruce</td>
            <td>Almighty</td>
            <td>45</td>
            <td>$153.19</td>
            <td>44%</td>
            <td>Jan 18, 2001 9:12 AM</td>
        </tr>
        <tr id="db-row-232">
            <td>Bruce</td>
            <td>Evans</td>
            <td>22</td>
            <td>$13.19</td>
            <td>11%</td>
            <td>Jan 18, 2007 9:12 AM</td>
        </tr>
    </tbody>
</table>

CSS

.tablesorter tbody > tr > td[contenteditable=true]:focus {
    outline: #08f 1px solid;
    background: #eee;
    resize: none;
}
td.no-edit, span.no-edit {
    background-color: rgba(230, 191, 153, 0.5);
}
.focused {
    color: blue;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function () {

    $("#table").tablesorter({
        theme: 'blue',

        widgets: ['resizable', 'editable'],
        widgetOptions: {
            // or "0-2" (v2.14.2); point to the columns to make editable
            // (zero-based index)
            editable_columns: [0, 1, 2],
            // press enter to accept content, or click outside if false
            editable_enterToAccept: false,
            // accepts any changes made to the table cell automatically
            editable_autoAccept: true,
            // auto resort after the content has changed.
            editable_autoResort: false,
            // return a valid string: 
            // function(text, original, columnIndex){ return text; }
            editable_validate: null,
            editable_focused: function (txt, columnIndex, $element) {
                // $element is the div, not the td
                // to get the td, use $element.closest('td')
                $element.addClass('focused');
            },
            editable_blur: function (txt, columnIndex, $element) {
                // $element is the div, not the td
                // to get the td, use $element.closest('td')
                $element.removeClass('focused');
            },
            // note $element is the div inside of the table cell, so use
            // $element.closest('td') to get the cell only select everthing
            // within the element when the content starts with the letter "B"
            editable_selectAll: function (txt, columnIndex, $element) {
                return /^b/i.test(txt) && columnIndex === 0;
            },
            // trim content inside of contenteditable
            // ( remove tabs & carriage returns )
            editable_trimContent: false,
            // wrap all editable cell content... makes this widget work in
            // IE, and with autocomplete
          ...