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

Вступление


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

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

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


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


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

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

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

Подключаем в теге HEAD нашей страницы все наши скрипты и стили. У меня они выглядели так:
    <link type="text/css" rel="stylesheet" href="bluetable/style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.metadata.js"></script>
    <script type="text/javascript" src="/js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="/js/jquery.tablesorter.pager.js"></script>


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

    <script type="text/javascript">
$(document).ready(function() { 
    $("table") 
    .tablesorter({widthFixed: true, widgets: ['zebra']}) 
    .tablesorterPager({container: $("#pager")}); 
});
    </script>


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

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

<table cellspacing="1" class="tablesorter">              
    <thead>  
        <tr> 
             <th>имя</th> 
             <th>фамилия</th> 
             <th>возраст</th> 
             <th>итого</th> 
             <th>скидка</th> 
             <th>дата</th> 
         </tr>  
    </thead>  
    <tbody>  
        <tr> 
             <td>петр</td> 
             <td>сидоров</td> 
             <td>28</td> 
             <td>$9.99</td> 
             <td>20%</td> 
             <td>jul 6, 2006 8:14 am</td> 
         </tr>  
        <tr> 
             <td>иван</td> 
             <td>хайкин</td> 
             <td>33</td> 
             <td>$19.99</td> 
             <td>25%</td> 
             <td>dec 10, 2002 5:14 am</td> 
         </tr>  
        <tr> 
             <td>николай</td> 
             <td>котов</td> 
             <td>18</td> 
             <td>$15.89</td> 
             <td>44%</td> 
             <td>jan 12, 2003 11:14 am</td> 
         </tr>  
        <tr> 
             <td>борис</td> 
             <td>арнов</td> 
             <td>45</td> 
             <td>$153.19</td> 
             <td>44%</td> 
             <td>jan 18, 2001 9:12 am</td> 
         </tr>  
        <tr> 
             <td>борис</td> 
             <td>егоров</td> 
             <td>22</td> 
             <td>$13.19</td> 
             <td>11%</td> 
             <td>jan 18, 2007 9:12 am</td> 
         </tr>  
    </tbody>  
</table> 


И теперь подключаем те самые наши элементы навигации, которые в документации не указаны (без них будут ошибки на странице):

<div id="pager" class="pager" style="top: 652px; position: absolute; "> 
	<form> 
		<img src="/images/table/first.png" class="first"> 
		<img src="/images/table/prev.png" class="prev"> 
		<input type="text" class="pagedisplay"> 
		<img src="/images/table/next.png" class="next"> 
		<img src="/images/table/last.png" class="last"> 
		<select class="pagesize"> 
			<option selected="selected" value="10">10</option> 
			<option value="20">20</option> 
			<option value="30">30</option> 
			<option value="40">40</option> 
		</select> 
	</form> 
</div>


Всё! Теперь наша таблица работает исправно!
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 31

    0
    ajax так и не пофиксили =(
      –1
      Есть и ajax, не паникуй! ))
      И тоже довольно легко настраивается, глянь сюда: http://tablesorter.ru/docs/example-ajax.htmlhttp://tablesorter.ru/docs/example-ajax.html
        0
        По приведенной ссылке при нажатии на «Добавить новые данные» FireBug показывает следующее:
        GET — tablesorter.ru/docs/assets/ajax-content.html

        The requested URL /docs/assets/ajax-content.html was not found on this server.
          0
          я им месяцев 5 назад писал, что не работает… что русская версия отдает 404, а в английской при добавлении новых данных не срабатывает сортировка… предложил свое решение… хоть бы кто-нибудь пошевелился…
            0
            Значит проект глохнет потихоньку… А жалко — довольно перспективный!
        0
        Сам плагин понравился. Особенно порадовала возможность сортировки по нескольким колонкам через Shift.
        И спасибо за пагинацию! :)
          +4
          А мне нравится это решение: datatables.net :-[
            +1
            Да, эта штука замечательна!
              +1
              Я тоже его использую. Логика API несколько извращенная, но если привыкнуть — то очень даже ничего…
                +2
                Перешли на него как раз с TableSorter. Значительно лучше, TableSorter устарел и не обновляется.
                  +1
                  DataTables неимоверно хорош. Тоже перешёл на него с таблесортера.
                    +1
                    Да, согласен — этот вариант куда перспективнее! Спасибо за идею!
                    –1
                    >> Не хотелось для этого использовать PHP, так как эффект теряется при перезагрузке страницы.

                    Ваш способ хороший, но я не могу не указать на неточность.
                    С помощью php и ajax эта задача отлично решается.
                      0
                      Я в курсе, спасибо за поправку, но не всегда есть желание, а главное время изобретать самому велосипед.
                      Всегда мы почему-то бежим сперва за готовыми решениями… :)
                        0
                        >> Сейчас я покажу вам как настроить постраничную навигацию с помощью этого плагина — на самом деле решение довольно простое, а вот на поиск этого решения у меня ушло немало времени.

                        Как скажете!
                          0
                          >> Как скажете!

                          Улыбнуло…
                          Именно так и скажу… Для меня два часа — это немало времени! За эти два часа можно целый сайт сделать!
                      0
                      У нас тоже был Tablesorter. Но учитывая то что все было на backbone оказалось быстрее доделать на класс, чем допиливать tablesorter.
                        –1
                        Мне вот это решение нравится, минимум кода и максимум гибкости. Правда не JQuery.
                          0
                          Я пытался сделать ajax-pager из обычного pager. Там кода мало, дописывать свое не сложно. В итоге не дописал и решил проблему по-другому.

                          Перешел на Yii Framework. В нем есть встроенный класс CLinkPager, а еще CGridView, которые вместе все это реализуют.
                          И сортировку, и ajax, все что угодно. Дополнительно писать даже не надо ничего.
                            –1
                            Минут за 40 пишу такие вещи с помощью $.load('script.php?p1=param1&p2=param2') — обратно получаю готовую html-таблицу. Подгрузка таблицы вызввается по изменению select с фильтрами или сортировками.

                            Все просто и на ajax-е, реализуется любой функционал сортировок и выборок на стороне PHP-скрипта.
                              0
                              Иногда проще разом получить большой кусок данных и оставить хитрости отображения (разбивка на страницы, сортировка, фильтрация) на долю JS. Например, в одном большом приложении любая порция данных (логи покупок, если конкретно) выплевывается около 2-3 секунд. Гораздо проще сразу дать пользователю 100-200 записей за пол-года и потом их крутить всякими tablesorter'ами и т.п.
                                0
                                Есть реальные случаи когда таблица росла до 50 000 записей (товары интернет-магазина, история заказов). Не выбирать же из БД сразу всё.
                              0
                              Долго вспоминал, чем же не понравился плагин раздивки на странице у tablesorter'a:
                              1. Жуткий код — слабое использование jQuery, сложный для восприятия
                              2. Завязанность на верстку — почти никакой возможности использовать свою реализацию верстки в pagination

                              В итоге, в плагине в живых осталось только разбиение на методы (moveTo...) и чтение конфига. Собственная версия умеет понимать любую верстку, содержит дополнительные event-firing.
                                0
                                Посмотрите еще такой плагин flexigrid.info/
                                  0
                                  В копилку!
                                  +1
                                  Больше всего мне понравилась вот такая штука — www.trirand.net/demophp.aspx (может кому-то пригодится) — jqGrid.
                                    0
                                    Интересный вариант, но там при каждой сортировке выполняется запрос к базе. Нужно ждать, а это не всегда хорошо.

                                    В копилку!
                                      0
                                      там есть разные варианты, можно выгружать данные сразу, выгружать из CSV и т.д. Не обязательно каждый раз делать запрос в базу. Но это один из нормальных вариантов.
                                    0
                                    Недавно столкнулся с этим плагином, был в комплекте с админкой. Так как было лень прикручивать что-то другое решил этот настроить как надо. В интернете вроде бы есть дополнения к нему, чтобы сделать сохранение текущих позиций в кукисы, но не нашёл ни одного рабочего решения, пришлось самому дописывать. Гораздо проще было бы в самом начале взять DataTables и настроить CSS, но нет же, лень :)
                                      0
                                      Спасибо тебе, добрый человек.
                                        0
                                        Домен www.tablesorter.ru кажется киберсквоттнули…

                                        Only users with full accounts can post comments. Log in, please.