Сортировка таблиц – очень часто встречающаяся задача при построении пользовательских интерфейсов. Давайте посмотрим как легко и просто решается задача сортировки таблиц на стороне клиента с помощью библиотеки jQuery.

Испытайте этот небольшой пример, а затем мы разберем как это сделано.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

В раздел HEAD понадобится подключить всего два файла: библиотеку jQuery – jquery-1.2.1.js и файл ui.tablesorter.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/ui.tablesorter.js"></script>

В исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для таблицы */.

HTML-код не представляет собой ничего интересного – это обычная таблица. Обращу внимание разве что на необходимость использования тэгов thead и tbody.

И наконец приведу очень простой код, который будет вызывать UI Tablesorter:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").tablesorter({
	widgets: ["zebra"],
	sortList:[[1,0]]
  });
});
</script>

Таблица с идентификатором #example будет сортируемой. Большинство опций сортировки задано по умолчанию в самом файле ui.tablesorter.js, но мы легко можем их переопределить.
widgets: ["zebra"] – используем «фирменный» виджет, чтобы чередовать цвет строк в таблице.
sortList:[[1,0]] – задаем сортировку по умолчанию (при загрузке). В этом примере – сортировка второго столбца по возрастанию (первая цифра – порядковый номер столбца, вторая порядок сортировки, где 0 – по возрастанию, 1 – по убыванию). Здесь можно задавать сортировку и по нескольким столбцам сразу. Например: sortList:[[1,0], [0,1]] – сначала второй столбец сортируется по возрастанию, а затем первый – по убыванию…

Приведу еще пару полезных опций.
sortMultisortKey – по умолчанию задано значение shiftKey, т.е. щелкая мышью по заголовку столбца при нажатой клавише Shift можно выполнять сортировку по нескольким столбцам. Естественно клавишу можно переопределить. Например так: sortMultiSortKey: «ctrlKey». Теперь можно работать через клавишу Ctrl.
headers – с помощью этой опции можно запретить сортировку по отдельным столбцам. Например: headers: { 4: { sorter: false} } запретит сортировку пятого столбца.

Весь список опций есть на сайте разработчиков библиотеки, а я буду благодарен, если найдете возможность оставить свои отзывы…

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal