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.blue.css">
<button class="add">Add Row</button>
<table class="tablesorter">
  <thead>
    <tr>
      <th>AlphaNumeric</th>
      <th>Numeric</th>
      <th>Animals</th>
      <th>Sites</th>
      <th class="sorter-false">Delete</th>
    </tr>
  </thead>
  <tbody>
</table>

CSS

table {
	width: 100%;
	margin: 10px 0 15px;
	text-align: left;
	border-spacing: 0;
	border: #cdcdcd 1px solid;
}
table th, table td {
	padding: 4px;
  border: #cdcdcd 1px solid;
}

JavaScript

var minRows = 3, // Minimum number of rows needed before tablesorter allows sorting

  $t = $('table'),
  // sample row
  r = '<tr><td>abc {i}</td><td>{i}</td><td>Koala {i}</td><td>http://www.google.com/{i}</td><td><button>X</button></tr>',
  // check number of rows; enable or disable sorting
  checkRows = function () {
    // check number of rows
    var min = $t.find('tbody tr').length < minRows;
    // go through each header and enable/disable as needed
    $t[0].config.$headers.each(function (i) {
      // only enable/disable certain columns (ignore delete column, it's always disabled)
      if (i < 4) {
        // disable sort per column
        this.sortDisabled = min;
        // remove table styling completely when not enabled
        $t.toggleClass('tablesorter-blue', !min);
        $(this).toggleClass('tablesorter-header', !min);
        // add sorter-false class to hide controls
        $(this).toggleClass('sorter-false', min);
      }
    });
  },
  addRow = function () {
    // add row with a random number
    $t.find('tbody').append(r.replace(/\{i\}/g, Math.floor(Math.random() * 100)))
      .trigger('update');
  };

$('.add').click(addRow);

$t.on('click', 'button', function () {
  // delete row
  $(this).closest('tr').remove();
  $t.trigger('update');
})
// check number of rows after initialization & updates
.on('tablesorter-initialized updateComplete', checkRows)
// initialize tablesorter
.tablesorter({
  theme: 'blue',
  widgets: ['zebra', 'columns']
});