Плагин jQuery для сортировки таблиц: TableSorter.js. Как добиться постраничной навигации?

Опубликовал(а): Niko в: 15.01.2012 Оставить комментарий (0) Перейти к комментариям

Вступление

При разработке одного проекта мне пришлось решать проблему с сортировкой данных в таблице. Не хотелось для этого использовать PHP, так как эффект теряется при перезагрузке страницы. Вот и наткнулся я на официальный сайт jQuery-плагина «TableSorter.js» — www.tablesorter.com. Немного покопавшись в англоязычной документации я с радостью обнаружил в новостях сайта ссылку на русскоязычный сайт: www.tablesorter.ru.

В принципе там всё предельно ясно было описано и я быстро понял как всё работает…

Но было в документации одно важное упущение: недостаточно описан принцип работы постраничной навигации, да и нужные файлы не выложены. А мне как-раз нужна была эта функция, так как в моих таблицах было минимум по 150 строк. Пришлось самому решить эту проблему.

Необходимые материалы

Качаем/подключаем к нашей странице следующие скрипты:
Сам jQuery: code.google.com/intl/ru-RU/apis/libraries/devguide.html#jquery
Плагин TableSorter: tablesorter.ru/jquery.tablesorter.min.js
Плагин к TableSorter для постраничной навигации: tablesorter.ru/addons/pager/jquery.tablesorter.pager.js
Синеватая тема (есть и зеленая): tablesorter.ru/themes/blue/blue.zip
Архив с картинками для постраничной навигации: bazmaster.ru/downloads/table.zip

Постраничная навигация

Сейчас я покажу вам как настроить постраничную навигацию с помощью этого плагина — на самом деле решение довольно простое, а вот на поиск этого решения у меня ушло немало времени.

Разобрался я с этой проблемой только тщательно изучив код данного там примера и скачав все рисунки и нужный мне код с кода самой страницы.

Картинки я собрал в отдельный архив, который вы сможете использовать.

Подключаем в теге HEAD нашей страницы все наши скрипты и стили. У меня они выглядели так:

Здесь же, в теге HEAD, пишем javascript-код, который и заставит нашу таблицу работать правильно:

Далее распаковываем архив с картинками в папку /images/table

Наша таблица будет выглядеть следующим образом:





имя
фамилия
возраст
итого
скидка
дата




петр
сидоров
28
$9.99
20%
jul 6, 2006 8:14 am


иван
хайкин
33
$19.99
25%
dec 10, 2002 5:14 am


николай
котов
18
$15.89
44%
jan 12, 2003 11:14 am


борис
арнов
45
$153.19
44%
jan 18, 2001 9:12 am


борис
егоров
22
$13.19
11%
jan 18, 2007 9:12 am

имя	фамилия	возраст	итого	скидка	дата
петр	сидоров	28	$9.99	20%	jul 6, 2006 8:14 am
иван	хайкин	33	$19.99	25%	dec 10, 2002 5:14 am
николай	котов	18	$15.89	44%	jan 12, 2003 11:14 am
борис	арнов	45	$153.19	44%	jan 18, 2001 9:12 am
борис	егоров	22	$13.19	11%	jan 18, 2007 9:12 am