На этом шаге мы начнем рассматривать реализацию фильтра.
В предыдущих шагах мы рассматривали сортировку и разбивку на страницы как приемы, облегчающие возможность сфокусировать внимание пользователя на соответствующих фрагментах данных в таблице. Мы видели, что обе эти возможности могут быть реализованы как с использованием серверных технологий, так и средствами JavaScript. Фильтрация дополняет этот арсенал стратегий управления данными. Отображая только те строки таблицы, которые удовлетворяют определенному критерию, мы можем устранить факторы, отвлекающие внимание.
Мы уже видели, как выполняется одна из разновидностей фильтрации: выделение набора строк. Теперь мы расширим эту идею фактическим сокрытием строк, не соответствующих критерию фильтра.
Начнем с создания места, куда будут помещаться ссылки фильтра. Используя типичную стратегию прогрессивного улучшения, мы будем вставлять необходимые элементы управления с помощью JavaScript, чтобы они не отображались в браузерах с отключенной поддержкой JavaScript:
$(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);
$filters.insertBefore($table);
}
});
});
});
Мы создали метку для поля фильтра, исходя из заголовков столбцов, благодаря чему этот программный код может легко использоваться и для других таблиц. Теперь у нас имеется заголовок, куда можно поместить некоторые кнопки, как показано на рисунке 1.
Рис.1. Выделение раздела для дополнительных ссылок
Полный текст этого примера можно взять здесь.На следующем шаге мы продолжим изучение этого вопроса.
