Tablesorter demo

All options included, as well as the uitheme widget

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">
Город:
<br>
</p>
<button class="search" data-filter-column="11" data-filter-text="Владивосток">Владивосток</button>
<button class="search" data-filter-column="11" data-filter-text="Артем">Артем</button>
<button class="search" data-filter-column="11" data-filter-text="">Все города</button>
<br />

<table id="festivaloverzichttable" class="tablesorter">
    <thead>
      <tr>
        <th width="17%" data-placeholder="Search...">Имя</th>
        <th width="18%" data-placeholder="Search...">Фамилия</th>
        <th  data-placeholder="Search...">Дата рождения</th>
        <th data-placeholder="Search...">Возраст</th>
        <th data-placeholder="Search...">Пол</th>          
        <th width="10%" data-placeholder="Search...">Должность</th>
        <th width="10%" data-placeholder="Search...">Мобильный</th>          
        <th width="10%" data-placeholder="Search...">Стационарный</th>                    
        <th width="10%" data-placeholder="Search...">Skype</th>                              
        <th width="10%" data-placeholder="Search...">Email</th>                                    ...

CSS

.tablesorter-filter {
    display:none
}
.tablesorter-offset {
    top:30px;
}

JavaScript

$(function(){

  var options = {
    theme: 'ice',
    widthFixed : true,
    showProcessing: true,
    headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!

    widgets: [ '', 'zebra', 'cssStickyHeaders', 'filter' ],

          
    sortList: [[2,0], [4,0]],
      
    widgetOptions: {
      cssStickyHeaders_offset     : 0,
      cssStickyHeaders_addCaption : true,
      cssStickyHeaders_attachTo   : null
    }

  };

  $("#festivaloverzichttable").tablesorter(options);
    
 $('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);
  });   
 

});