Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-build-table.js"></script>
<div id="table"></div>

CSS

/* Build widget demo */

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  // object or JSON
  var dataObject = {
    headers : [
      [
        // each object/string is a cell
        { text: 'First Name', class: 'fname', width: '10%' }, // row 0 cell 1
        'Last Name',                                          // row 0 cell 2
        { text: 'Age', class: 'age', 'data-sorter' : false }, // row 0 cell 3
        'Total',                                              // row 0 cell 4
        { text: 'Discount', class : 'sorter-false' },         // row 0 cell 5
        { text: 'Date', class : 'date' }                      // row 0 cell 6
      ]
    ],
    footers : 'clone', // clone headers or assign array like headers
    rows : [
      // TBODY 1
      [ 'Peter', 'Parker', 28, '$9.99',  '20%', 'Jul 6, 2006 8:14 AM'   ], // row 1
      [ 'John',  'Hood',   33, '$19.99', '25%', 'Dec 10, 2002 5:14 AM'  ], // row 2
      [ 'Clark', 'Kent',   18, '$15.89', '44%', 'Jan 12, 2003 11:14 AM' ], // row 3

      // TBODY 2
      { newTbody: true, class: 'tablesorter-infoOnly' },
      { cells : [ { html: '<strong>Info Row</strong>', colSpan: 6 } ] }, // row 4

      // TBODY 3
      { newTbody: true },
      [ 'Bruce', 'Evans',    22, '$13.19',  '11%', 'Jan 18, 2007 9:12 AM'  ], // row 5
      [ 'Bruce', 'Almighty', 45, '$153.19', '44%', 'Jan 18, 2001 9:12 AM'  ], // row 6

      { class: 'specialRow', // row 7
        cells: [
          // each object/string is a cell
          { text: 'Fred', class: 'fname' },                                  // row 7 cell 1
          { text: 'Smith', class: 'lname' },                                 // row 7 cell 2
          { text: 18, class: 'age', 'data-info': "fake ID!, he's only 16" }, // row 7 cell 3
          { text: '$22.44', class: 'total' },                                // row 7 cell 4
          '8%',                                                              // row 7 cell...