Tablesorter demo

All options included, as well as the uitheme widget

by Yuriy

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">
Country:
<br>
</p>
<button class="search" data-filter-column="4" data-filter-text="Netherlands">Netherlands</button>
<button class="search" data-filter-column="4" data-filter-text="Belgium">Belgium</button>
<button class="search" data-filter-column="4" data-filter-text="Germany">Germany</button>
<button class="search" data-filter-column="4" data-filter-text="">Clear</button>
<br />
<br />Month:
<br>
<button class="search" data-filter-column="1" data-filter-text="January">January</button>
<button class="search" data-filter-column="1" data-filter-text="February">February</button>
<button class="search" data-filter-column="1" data-filter-text="March">March</button>
<button class="search" data-filter-column="1" data-filter-text="April">April</button>
<button class="search" data-filter-column="1" data-filter-text="May">May</button>
<button class="search" data-filter-column="1" data-filter-text="June">June</button>
<button class="search" data-filter-column="1" data-filter-text="July">July</button>
<button class="search" data-filter-column="1" data-filter-text="August">August</button>
<button...

JavaScript

$(function () {
  $.tablesorter.addParser({
    id: 'data',
    is: function (s) {
      return false;
    },
    format: function (s, table, cell, cellIndex) {
      var $cell = $(cell);
      if (cellIndex === 1) {
        return $cell.attr('data-date') || s;
      }
      return s;
    },
    type: 'text'
  });

  $("#festivaloverzichttable").tablesorter({
    headers: {
      1: {
        sorter: 'data'
      }
    },
    sortList: [
      [0, 0]
    ],
    widgets: ['zebra', 'filter', 'saveSort'],
    widgetOptions: {
      filter_childRows: false,
      filter_columnFilters: true,
      filter_cssFilter: 'tablesorter-filter',
      filter_functions: null,
      filter_hideFilters: false,
      filter_ignoreCase: true,
      filter_reset: 'button.reset',
      filter_searchDelay: 300,
      filter_startsWith: false,
      filter_useParsedData: false
    }
  });
  $('button.search').click(function () {
    var filters = $('table').find('input.tablesorter-filter'),
      col = $(this).data('filter-column'),
      txt = $(this).data('filter-text'),
      cur = filters.eq(col).val(),
      mult, i;

    if (cur && txt !== "") {
      mult = cur.split('|');
      i = $.inArray(txt, mult);
      if (i < 0) {
        mult.push(txt);
      } else {
        mult.splice(i, 1);
      }
      txt = mult.join('|');
    }
    filters.eq(col).val(txt).trigger('search', false);
  });
});