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.bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Mike</td>
      <td>Wazowski</td>
      <td>@university</td>
    </tr>
  </tbody>
</table>

JavaScript

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

  var $table = $('table');
  $table
    .Tabledit({
      columns: {
        identifier: [0, 'id'],
        hideIdentifier: true,
        editable: [
          [1, 'App Date'],
          [2, 'App Time'],
          [3, 'Service Type', '{"1": "@mdo", "2": "@fat", "3": "@twitter", "4": "@university"}']
        ]
      }
    })
    .on('click', 'button:not(.tabledit-save-button)', function() {
      // prevent sorting while editing
      $table[0].isUpdating = $(this).closest('td').hasClass('tabledit-edit-mode');
    })
    .on('click', 'button.tabledit-save-button', function() {
    	// update tablesorter cache
      $table.trigger('update');
    })
    .tablesorter({
      theme: 'bootstrap',
      headerTemplate: '{content}{icon}',
      textExtraction: function(node, table, cellIndex) {
        var $cell = $(node);
        // sortable data inside of a span
        return $cell.find('.tabledit-span').text() || $cell.text();
      },
      widgets: ['zebra', 'uitheme'],
      headers: {
        4: {
        	// don't sort the Tabledit controls added dynamically
          sorter: false
        }
      }
    });

});