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 border="3" cellspacing="2" cellpadding="3" valign="top" id="myTable" class="tablesorter">
<thead>
<tr>
<th class="stopGapTH" colspan="4">
Patient List - all
</th>
<th class="stopGapTH" colspan="99">
Clinical Adherence Information
</th>
</tr>
<tr height="30">
<th width="10%" align="middle">
Patient Name
</th>
<th width="5%" align="middle">
DOB
</th>
<th width="5%" align="middle">
Primary Disease
</th>
<th width="5%" align="middle">
Risk Index
</th>
<th class="stopGapConditionHeader" align="middle">
<a...
JavaScript
$(function() {
var headers = {},
$table = $('#myTable'),
i, l = $table.find('thead th').length,
// columns 0 and 1 are the top row "Patient List - all"
// and "Clinical Adherence Information"
sortcolumns = [2, 3, 4, 5];
// build headers object; based on sortcolumn selections
for (i = 0; i < l; i++) {
if ($.inArray(i, sortcolumns) < 0) {
headers[i] = {
sorter: false
}
}
}
$table.tablesorter({
widgets: ['zebra'],
headers: headers // headers object built above
});
});