На этом шаге мы рассмотрим реализацию простой сортировки.
Наша первая процедура сортировки выглядит, как показано ниже:
$(document).ready(function() {
$('table.sortable').each(function() {
var $table = $(this);
$('th', $table).each(function(column) {
var $header = $(this);
if ($header.is('.sort-alpha')) {
$header.addClass('clickable').hover(function() {
$header.addClass('hover');
}, function() {
$header.removeClass('hover');
}).click(function() {
var rows = $table.find('tbody > tr').get();
rows.sort(function(a, b) {
var keyA = $(a).children('td').eq(column).text()
.toUpperCase();
var keyB = $(b).children('td').eq(column).text()
.toUpperCase();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
});
}
});
});
});
Первое, на что здесь следует обратить внимание, - это использование метода .each(), который делает итерации явными. Мы могли бы подключить обработчик события click ко всем заголовкам, содержащим класс sort-alpha, простым вызовом $('table.sortable th.sort-alpha').click(), но это не позволило бы нам легко получить важную информацию: индекс столбца, на заголовке которого был выполнен щелчок. Благодаря тому, что метод .each() передает индекс итерации своей функции обратного вызова, мы сможем использовать его позднее для поиска соответствующей ячейки в каждой строке данных.
Отыскав ячейку в заголовке, мы извлекаем массив всех строк с данными. Это прекрасный пример того, насколько удобно с помощью метода get() выполнять преобразование объекта jQuery в массив узлов дерева DOM; несмотря на то что объекты jQuery во многом напоминают массивы, в них отсутствуют какие-либо свойственные массивам методы, такие как .sort().
Теперь, когда у нас имеется массив узлов DOM, мы можем отсортировать его, но для этого необходимо написать подходящую функцию сравнения. Нам требуется отсортировать строки в соответствии с текстом, содержащимся в ячейках таблицы, поэтому именно эту информацию и будет рассматривать функция сравнения. Нам известно, какие ячейки необходимо сравнить, потому что мы сохранили индекс столбца в объемлющем вызове метода .each(). Так как сравнение строк в JavaScript выполняется с учетом регистра символов, а нам желательно сделать сортировку нечувствительной к регистру символов, мы приводим все символы к верхнему регистру. Чтобы избежать лишних вычислений, мы сохраняем значения ключей в переменных, сравниваем их и возвращаем положительное или отрицательное число, как оговаривалось выше.
Выполнив сортировку массива, мы обходим строки в цикле и вставляем их обратно в таблицу. Метод .append() не создает копии узлов, поэтому он не копирует их, а перемещает. Теперь наша таблица отсортирована.
Рис.1. Сортировка таблицы
Полный текст этого примера можно взять здесь.Этот пример демонстрирует использование приема постепенной деградации, противоположного приему прогрессивного улучшения. В отличие от решений на основе применения технологии AJAX, обсуждавшихся ранее, данное решение не может функционировать без поддержки JavaScript; здесь предполагается, что у нас нет доступа к программному коду на стороне сервера. Так как для обеспечения возможности сортировки нам необходимо наличие поддержки JavaScript, мы производим добавление класса clickable только в программном коде, благодаря чему интерфейс будет указывать на возможность сортировки (за счет использования фонового изображения), только если сценарий имеет возможность работать. В случае отсутствия поддержки JavaScript в браузере функциональность страницы деградирует: страница по-прежнему будет выполнять свои функции, но уже без возможности сортировки.
На следующем шаге мы закончим изучение этого вопроса.
