На этом шаге мы рассмотрим реализацию данной возможности.
Последнее наше улучшение позволит выполнять сортировку в порядке возрастания или убывания. Пусть теперь необходимо, чтобы в результате выполнения пользователем щелчка на столбце, по которому уже была выполнена сортировка, текущий порядок сортировки менялся на обратный.
Чтобы обратить порядок сортировки, достаточно просто изменить знак значения, возвращаемого функцией сравнения. Это легко реализовать с помощью простой переменной:
if (a.sortKey < b.sortKey) return -sortDirection; if (a.sortKey > b.sortKey) return sortDirection;
Если значение переменной sortDirection равно 1, тогда сортировка будет выполняться в том же порядке, что и прежде. Если оно равно -1, сортировка будет выполняться в обратном порядке. Для сохранения информации о текущем порядке сортировки можно использовать классы:
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 sortDirection = 1;
if ($header.is('.sorted-asc')) {
sortDirection = -1;
}
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 -sortDirection;
if (a.sortKey > b.sortKey) return sortDirection;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.find('th').removeClass('sorted-asc')
.removeClass('sorted-desc');
if (sortDirection == 1) {
$header.addClass('sorted-asc');
}
else {
$header.addClass('sorted-desc');
}
$table.find('td').removeClass('sorted')
.filter(':nth-child(' + (column + 1) + ')')
.addClass('sorted');
$table.alternateRowColors();
});
}
});
});
});
Благодаря тому, что порядок сортировки запоминается с помощью классов, мы получаем также дополнительную возможность изменять оформление заголовков столбцов, чтобы показать текущий порядок сортировки (рисунок 1).
Рис.1. Заголовки столбцов указывают на порядок сортировки
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим разбивку на страницы на стороне сервера.
