На этом шаге мы рассмотрим задание сортировки по оставшимся столбцам таблицы.
Наши пользователи должны иметь возможность выполнять сортировку не только по столбцам Название и Автор(ы), но и по столбцам Год издания и Цена. Благодаря тому что мы модернизировали функцию сравнения, она в состоянии работать с данными любых типов; но нам еще необходимо реализовать вычисление ключей сортировки для других типов данных. Например, в случае сортировки по цене необходимо удалить конечные символы " руб" и преобразовать оставшуюся часть текста в число, чтобы значения ячеек сравнивались как числа:
var key = parseFloat($cell.text().replace(' руб', ''));
isNaN(key) ? 0 : key;
После этого необходимо проверить результат, возвращаемый функцией parseFloat(), поскольку в случае невозможности извлечь число из текста, она возвращает значение NaN (not a number - не число), что может вызвать ошибку в методе .sort().
Для ячеек, в которых хранятся даты, можно задействовать JavaScript объект Date:
row.sortKey = Date.parse('1 Jan ' + $cell.text());
Даты в таблице содержат только год, а метод Date.parse() требует, чтобы дата была указана полностью, поэтому мы добавляем в начало строки "1 Jan ". Таким образом мы дополняем год числом и месяцем, благодаря чему полученная комбинация может быть преобразована в значение типа timestamp, которое может использоваться для сортировки нашей обычной функцией сравнения.
Мы можем оформить эти выражения в виде отдельных функций и вызывать подходящую, опираясь на класс в заголовке таблицы:
jQuery.fn.alternateRowColors = function() {
$('tbody tr:odd', this)
.removeClass('even').addClass('odd');
$('tbody tr:even', this)
.removeClass('odd').addClass('even');
return this;
};
$(document).ready(function() {
$('table.sortable').each(function() {
var $table = $(this);
$table.alternateRowColors();
$('th', $table).each(function(column) {
var $header = $(this);
var findSortKey;
if ($header.is('.sort-alpha')) {
findSortKey = function($cell) {
return $cell.find('.sort-key').text().toUpperCase()
+ ' ' + $cell.text().toUpperCase();
};
}
else if ($header.is('.sort-numeric')) {
findSortKey = function($cell) {
var key = $cell.text().replace(' руб', '');
key = parseFloat(key);
return isNaN(key) ? 0 : key;
};
}
else if ($header.is('.sort-date')) {
findSortKey = function($cell) {
return Date.parse('1 Jan' + $cell.text());
};
}
if (findSortKey) {
$header.addClass('clickable').hover(function() {
$header.addClass('hover');
}, function() {
$header.removeClass('hover');
}).click(function() {
var rows = $table.find('tbody > tr').get();
$.each(rows, function(index, row) {
var $cell = $(row).children('td').eq(column);
row.sortKey = findSortKey($cell);
});
rows.sort(function(a, b) {
if (a.sortKey < b.sortKey) return -1;
if (a.sortKey > b.sortKey) return 1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.alternateRowColors();
});
}
});
});
});
Переменная findSortKey дополнительно работает как функция для вычисления значений ключей, а флаг помогает определить, каким классом сортировки отмечен заголовок столбца. Теперь мы можем сортировать данные в таблице по дате или по цене, как показано на рисунке 1.
Рис.1. Таблицу можно отсортировать по каждому столбцу
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим выделение столбца.
