Tablesorter Example

by thepriebe

HTML

<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title></title>
    
    <style type="text/css">
    th.headerSortUp { 
                background-image: url(../img/small_asc.gif); 
                background-color: #3399FF; 
        }
        th.headerSortDown { 
                background-image: url(../img/small_desc.gif); 
                background-color: #3399FF; 
        }
        th.header { 
                background-image: url(../img/small.gif);     
                cursor: pointer; 
                font-weight: bold; 
                background-repeat: no-repeat; 
                background-position: center left; 
                padding-left: 20px; 
                border-right: 1px solid #dad9c7; 
                margin-left: -1px; 
        } 
    </style>
  </head>
  <body>
    <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

$(document).ready(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 (sortcolumns.indexOf(i) < 0) {
            headers[i] = {
                sorter: false
            }
        }
    }
    $table.tablesorter({
        //widgets: ['zebra'],
        headers: headers // headers object built above
    });

});