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">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<table id="test">
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
      <th>Another Example</th>
    </tr>
  </thead>
<tbody>
  <tr>
  <td>Test</td>
  <td>5</td>
  <td>Asdfasdfasdf</td>
  </tr>
  
  <tr>
  <td>Test</td>
  <td>5</td>
  <td>Bye</td>
  </tr>
  
  <tr>
  <td>Test</td>
  <td>5</td>
  <td>Bye</td>
  </tr>
  
  <tr>
  <td>Test</td>
  <td>3</td>
  <td>Bye</td>
  </tr>
  
  <tr>
  <td>Lorem</td>
  <td>3</td>
  <td>Asdfasdfasdf</td>
  </tr>
  
  <tr>
  <td>Lorem</td>
  <td>3</td>
  <td>Asdfasdfasdf</td>
  </tr>
  
  <tr>
  <td>Lorem</td>
  <td>4</td>
  <td>Bye</td>
  </tr>
  
  <tr>
  <td>Test</td>
  <td>4</td>
  <td>Hello</td>
  </tr>          
  
  <tr>
  <td>Test</td>
  <td>4</td>
  <td>Hello</td>
  </tr>
</tbody>
</table>

CSS

tr.spacer { height: 40px; }

JavaScript

$.tablesorter.addWidget({
    id: 'spacer',
    format: function(table) {
        var c = table.config,
        $t = $(table),
            $r = $t.find('tbody:first').find('tr'),
        i, l, last, col, rows, spacers = [];
        if (c.sortList && c.sortList[0]) {
            $t.find('tr.spacer').removeClass('spacer');
            col = c.sortList[0][0]; // first sorted column
            rows = table.config.cache[0].normalized;
            last = rows[0][col]; // text from first row
            l = rows.length;
            for (i=0; i < l; i++) {
                // if text from row doesn't match last row,
                // save it to add a spacer
                if (rows[i][col] !== last) {
                    spacers.push(i-1);
                    last = rows[i][col];
                }
            }
            // add spacer class to the appropriate rows
            for (i=0; i<spacers.length; i++){
                $r.eq(spacers[i]).addClass('spacer');
            }
        }
    }
});

$('table').tablesorter({
    widgets : ['spacer']
});