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">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.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/addons/pager/jquery.tablesorter.pager.js"></script>
<table>
  <thead>
    <tr>
      <th>Select</th>
      <th>Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tablesorter-hasChildRow">
      <td>
        <input type="checkbox" class="rowSelector">
      </td>
      <td>Column 2 Data</td>
    </tr>
    <tr class="tablesorter-childRow">
      <td>
        <input type="checkbox" class="rowSelector">
      </td>
      <td>Column 2 Data</td>
    </tr>
    <tr class="tablesorter-childRow">
      <td>
        <input type="checkbox" class="rowSelector">
      </td>
      <td>Column 2 Data</td>
    </tr>
    <tr class="tablesorter-hasChildRow">
      <td>
        <input type="checkbox" class="rowSelector">
      </td>
      <td>Column 2 Data</td>
    </tr>
    <tr class="tablesorter-childRow">
      <td>
        <input type="checkbox"...

CSS

th:first-child,
tr td:first-child {
  width: 30px;
  text-align: center;
}

.tablesorter-childRow td {
  color: red;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {

  var parentClass = '.tablesorter-hasChildRow',
    rowSelector = '.rowSelector';

  // return parent + all children
  function getGroupRows($row) {
    var isParent = $row.hasClass(parentClass.slice(1)),
      $rows = $row.nextUntil(parentClass).add($row),
      $prev = $row.prevUntil(parentClass).add($row);
    return isParent ? $rows : $rows.add($prev).add($prev.prev());
  }

  $('table')
    .tablesorter({
      theme: 'blue'
    })
    .on('change', rowSelector, function() {
      var $rows, checked, len,
        isChecked = this.checked,
        $row = $(this).closest('tr'),
        $group = getGroupRows($row);
      if ($row.hasClass(parentClass.slice(1))) {
        // parent checked, now (un)check all children
        $group.find('.rowSelector').prop('checked', isChecked);
      } else {
        // child row (un)checked, now figure out what to do with the parent
        $rows = $group.filter('.tablesorter-childRow');
        checked = $rows.find(rowSelector + ':checked').length;
        len = isChecked ? checked : $rows.length - checked;
        if (len === $rows.length) {
          // all child rows are the same, set the parent to match
          $group.filter(parentClass).find(rowSelector).prop({
            indeterminate: false,
            checked: isChecked
          });
        } else {
          // combo of checked & unchecked, make parent indeterminate
          $group.filter(parentClass).find(rowSelector).prop({
            indeterminate: true,
            checked: false
          });
        }
      }
    });
});