заголовки делаются стандартно - строки 77 - 84
добавлен параметр исключения колонок из фильтрации - это массив с номерами исключаемых колонок, либо ничего не указывайте.
Пример: Фильтр для таблицы
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{height:1000px;background:#FF8C00;font-family:Georgia,"Times New Roman",Times,serif;letter-spacing:1px}
.zebra select{margin:0px auto;width:100%;background:#CCC;color:#FFF}
.zebra select option {color: #ff0;background: #000;}
.zebra select option:nth-of-type(1) {color: #FFFFFF;background: #000;}
.zebra td{border:1px solid #555555;color:#FFF;padding:5px;text-align:left;background:#000}
.zebra tr:nth-child(2n) td{background:#383838}
.zebra thead td:hover{background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#E6E6FA),color-stop(1,#696969));background-image:-ms-linear-gradient(top,#E6E6FA,#696969);background-image:-o-linear-gradient(top,#E6E6FA,#696969);background-image:-moz-linear-gradient(top,#E6E6FA,#696969);background:-webkit-linear-gradient(top,#E6E6FA,#696969);background:linear-gradient(to bottom,#E6E6FA,#696969)}
.zebra thead tr td{padding:5px;font-weight:bold;background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#000000),color-stop(1,#CCCCCC));background-image:-o-linear-gradient(top,#000000,#CCCCCC);background-image:-moz-linear-gradient(top,#000000,#CCCCCC);background-image:-webkit-linear-gradient(top,#000000,#CCCCCC);background:linear-gradient(to bottom,#000000,#CCCCCC)}
.zebra tbody tr:hover td{background-image:-webkit-gradient(linear,left,right,color-stop(0,#D2691E),color-stop(1,#DEB887));background-image:-ms-linear-gradient(left,#D2691E,#DEB887);background-image:-o-linear-gradient(left,#D2691E,#DEB887);background-image:-moz-linear-gradient(left,#D2691E,#DEB887);background:-webkit-linear-gradient(left,#D2691E,#DEB887);background:linear-gradient(to right,#D2691E,#DEB887)}
table.zebra{border-collapse:collapse;border-spacing:0;box-shadow:0 2px 1px 5px rgba(242,242,242,0.1);width:700px;margin:0px auto}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function () {
$("table").tablework([0,2]); //указать исключаемые колонки и без параметров
});
$.fn.tablework = function(arr) {
return this.each(function() {
var $table = $(this),
$trs = $table.find("tbody tr"),
$thead = $table.find('thead');
$thead.length || ($thead = $('<thead/>').prependTo($table));
var $tr = $('<tr/>').prependTo($thead),
hide = {};
$("td", $trs.first()).each(function(indx, element) {
var options = [$('<option/>', {
'text': 'Без выбора'
})],
$td = $trs.find(":nth-child(" + (indx + 1) + ")"),
temp = {};
$td.each(function(i, el) {
var text = $(el).text();
temp[text] || (
options.push($('<option/>', {
'text': text
})),
temp[text] = true
);
});
var $select = $('<select/>', {
multiple: "multiple",
html: options,
'change': function() {
var val = $(this).val() || [];
hide[indx] = [];
this.selectedIndex && $td.each(function(i, el) {
$.inArray($(el).text(), val) == -1 && hide[indx].push($trs[i])
});
var trs = [];
for (var k in hide) $.merge(trs, hide[k]);
$.unique(trs);
$trs.show();
$(trs).hide()
}
});
var td = $('<td/>').appendTo($tr);
if(!arr || $.inArray(indx, arr)==-1 ) td.append($select);
});
});
};
</script>
</head>
<body>
<br>
<table class="zebra" >
<thead>
<tr>
<th>№</th>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr><td>1</td>
<td class="col1">Епихин</td>
<td class="col2">Александр</td>
<td class="col3">Валерьевич</td>
</tr>
<tr> <td>2</td>
<td class="col1">Буртовой</td>
<td class="col2">Евгений</td>
<td class="col3">Олегович</td>
</tr>
<tr><td>3</td>
<td class="col1">Епихин</td>
<td class="col2">Александр</td>
<td class="col3">Анатольевич</td>
</tr>
<tr> <td>4</td>
<td class="col1">Епихин</td>
<td class="col2">Сергей</td>
<td class="col3">Валерьевич</td>
</tr>
<tr><td>5</td>
<td class="col1">Буртовой</td>
<td class="col2">Александр</td>
<td class="col3">Олегович</td>
</tr>
</tbody>
</table>
</body>
</html>