На этом шаге мы рассмотрим простейшую реализацию фильтра.
Теперь можно перейти к фактической реализации фильтра. Для начала добавим фильтры для пары известных примечаний. Код для этого действия напоминает предыдущий пример выделения строк по автору:
$(document).ready(function() {
$('table.filterable').each(function() {
var $table = $(this);
$table.find('th').each(function(column) {
if ($(this).is('.filter-column')) {
var $filters = $('<div class="filters"></div>');
$('<h3></h3>')
.text('Фильтр по ' + $(this).text() + ':')
.appendTo($filters);
var keywords = ['Уч.пособие', 'Для web-программистов'];
$.each(keywords, function(index, keyword) {
$('<div class="filter"></div>').text(keyword)
.bind('click', {key: keyword}, function(event) {
$('tr:not(:has(th))', $table).each(function() {
var value = $('td', this).eq(column).text();
if (value == event.data['key']) {
$(this).show();
}
else {
$(this).hide();
}
});
$(this).addClass('active')
.siblings().removeClass('active');
}).addClass('clickable').appendTo($filters);
});
$filters.insertBefore($table);
}
});
});
});
Реализация начинается с определения статического массива ключевых слов, по которым будет выполняться фильтрация, затем выполняется обход массива в цикле и для каждого его элемента создается ссылка. Как и в примере с разбивкой на страницы, нам необходимо использовать аргумент data в вызове метода .bind(), чтобы избежать проблем, связанных с особенностями замыканий. После этого внутри обработчика события click содержимое каждой ячейки сравнивается с ключевым словом, и в случае несовпадения строка скрывается. Так как селектор строк исключает из набора строки, содержащие элемент <th>, можно не беспокоиться о том, что строки подзаголовков окажутся скрытыми.
Обе ссылки работают именно так, как и предполагалось (рисунок 1).
Рис.1. В таблице возможна фильтрация
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим выборку параметров фильтра из содержимого.
