Сортировка таблиц — при помощи плагина TableSorter.js

Сортировка таблиц - при помощи плагина TableSorter.js

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

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

Установка плагина

Первым делом давайте установим плагин tablesorter.js, для этого переходим на сайт http://tablesorter.com/docs/

Затем кликаем по ссылке Download:

И скачиваем архив с библиотекой – ссылка jquery.tablesorter.zip. Для данного урока я подготовил следующую страницу:

Таблица сохранена в базе данных и при помощи несложного скрипта, отображается на экране (в исходных материалах к уроку Вы сможете ознакомиться с данным скриптом).

Первым делом подключаем библиотеку jQuery, затем из скачанного архива, нам необходимо подключить плагин jquery.tablesorter.js, плагин постраничной навигации для таблиц jquery.tablesorter.pager.js, пустой файл script.js, в котором мы будем кодировать на языке JavaScript, а так же файл стилей из папки theme.

<link rel="stylesheet" href="css/style.css"/>

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Далее в фале script.js, добавим следующий код:

jQuery(document).ready(function($) {
	$("#myTable").tablesorter({});
});

То есть, выбираем блок с таблицей и вызываем метод tablesorter(). Теперь обновив информацию в браузере, мы увидим, что появилась возможность сортировки таблиц.

Настройки плагина

$("#myTable").tablesorter({
		sortList:[[1,0]],
		sortForce:[[3,0]],
		widgets:['zebra'],
		cancelSelection:false
		debug:true
		headers:{
			1:{
				sorter:false
			}
		}
	});

Плагин поддерживает следующие настройки:

sortList – сортировка полей по умолчанию, задается в виде массива, следующего вида [x,n], где x – индекс поля (индексация полей начинается с нуля), n – направление сортировки (0 прямое направление, 1 — обратное). Можно указать несколько ячеек [x,n], при этом будет выбрана сортировка, по умолчанию по нескольким полям;

sortForce – принудительная сортировка. Какое бы поле не выбрал пользователь для сортировки, выбранное в этом параметре поле, всегда будет участвовать в сортировке;

widgets – каждая не четная строка, закрашивается в определенный цвет;

cancelSelection – если true, запрещает выделение текста в шапке таблицы;

debug – режим отладки;

headers – используя данное свойство, можно запретить сортировку по выбранным полям таблицы.

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

Весь контент таблицы, моно разбить на несколько страниц, тем самым улучшить удобство пользования ею. Для этого добавим следующий HTML блок, который будет использоваться как панель управления страницами постраничной навигации:

<div id="pager" class="pager">
	<form>
		<img src="images/first.png" class="first"/>
		<img src="images/prev.png" class="prev"/>
		<input type="text" class="pagedisplay"/>
		<img src="images/next.png" class="next"/>
		<img src="images/last.png" class="last"/>
		<select class="pagesize">
			<option selected="selected"  value="2">2</option>
			<option value="4">4</option>
			<option  value="6">6</option>
			<option  value="8">8</option>
		</select>
	</form>
</div>

Далее необходимо вызвать метод tablesorterPager():

$("#myTable").tablesorter({
		widgets:['zebra'],
		debug:true,
		widthFixed:true
	}).tablesorterPager({
		size:2,
		container:$('#pager'),
		positionFixed:false,
		page:2,
		cssNext:'.next',
		cssPrev:'.prev',
		cssPrev:'.first',
		cssPrev:'.last',
	});

При этом указываем следующие настройки:

size – количество строк таблицы, на одной странице;

container – блок в котором расположена панель управления постраничной навигацией;

positionFixed – если передать TRUE, в стилях будет задана фиксированная позиция для элементов управления постраничной навигацией;

page – страница которая будет показана по умолчанию;

cssNext – блок, который будет использоваться как кнопка для перехода к следующей странице;

cssPrev– блок, который будет использоваться как кнопка для перехода к предыдущей странице;

cssFirst– блок, который будет использоваться как кнопка для перехода к первой странице;

cssLast– блок, который будет использоваться как кнопка для перехода к последней странице.

Теперь обновив страницу, мы увидим следующее:

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (19)

  1. Александр

    Здравствуйте! Как в материале joomla вывести таблицу? При переключении на html ввожу код, при сохранении, блок head прости исчезает. Начал только пользоваться Joomla! 3.4.1

  2. Alex'S

    tablesorterPager()
    копипаст «рулит»:)

    cssPrev:'.prev',
    cssPrev:'.first',
    cssPrev:'.last'

  3. Alex'S

    и да, спасибо за урок!

  4. zxzLEXzxz

    Статья супер, разжевано до мелочей.
    Вот только админ реально исправь код:
    cssNext:’.next’,
    cssPrev:’.prev’,
    cssPrev:’.first’,
    cssPrev:’.last’,

  5. Mikhail

    Спасибо за урок! Очень помогли. Хотелось бы узнать, как сделать каждую строчку таблицы ссылкой, чтобы по нажатию на строку выполнялось какое либо действие. Перерыл всю документацию и примеры на сайте, но ответа не нашел. Может подскажете? Думаю это будет полезно многим.

  6. Lena L.

    В IE пропадает содержимое таблицы. Показывается на секунду и пропадает, остается одна шапка и форма выбора страниц. В этой форме меняется содержание по клику на стрелках, меняется номер страницы, но сама страница с таблицей не показывается. В Chrome и FF все нормально. В IE дебаггер ошибок не показывает. На странице много других скриптов, выбор даты, поле быстрого поиска, поначалу они конфликтовали с TableSorter, но сейчас я все исправила, ошибок нет, но и таблицы не видно. В коде она есть. Если закомментарить пэйджинг, таблица выводится вся. В чем может быть причина?

  7. Роман

    А как быть. если таблица из БД выводится не сразу при загрузке страницы, а только после нажатия кнопки? Почему спрашиваю — если у меня таблица вывелась после нажатия кнопки, то она никак не сортируется — к ней только стили применяются и всё. Как быть в моём случае?

    • Андрей Кудлай

      Возможно поможет делегирование событий.

      • Роман

        Андрей, возможно это оно и есть, только я не могу понять куда метод live вставить в код (он поддерживается подключённой библиотекой, я проверял)? Подскажите, пожалуйста, если у кнопки id=»confirm_btn» (если потребуется) вот пример кода:
        $(document).ready(function(){
        $(«#stat»).tablesorter({
        sortList: [[0,0]],
        widgets: ['zebra'],
        cancelSelection: false,
        widthFixed: true,
        }).tablesorterPager({
        container: $(‘#pager’),
        size: 2,
        positionFixed: false,
        page: 0,
        cssFirst: ‘.first’,
        cssLast: ‘.last’,
        cssNext: ‘.next’,
        cssPrev: ‘.prev’,
        });
        });

        • Андрей Кудлай

          В этот код его некуда вставлять, да и незачем, поскольку это код вызова плагина. Вам же нужно делегировать событие для тех элементов, в которые добавляются новые элементы. В данном случае, насколько я понимаю, при клике по некой кнопке подгружается некая таблица. Таблица — это динамический элемент, которому и нужно делегировать событие. Т.е. это делается не при вызове плагина, а при подгрузке таблицы.

          • Роман

            Андрей, если я правильно понял, live надо привязать к кнопке? Если да, то код походу такой:
            $(document).ready(function(){
            $(‘#confirm_btn’).live(«click»,function(){
            $(«#stat»).tablesorter({
            sortList: [[0,0]],
            widgets: ['zebra'],
            cancelSelection: false,
            widthFixed: true,
            });
            });
            Всё равно не работает.
            Или же надо live привязывать к div где появляется таблица?

          • Андрей Кудлай

            А зачем Вы вызов плагина засунули внутрь события клик? Это 2 разные операции: вызов плагина отдельно, а добавление таблицы в DOM — отдельно.

  8. Роман

    Андрей, у меня проблема как добавить эту динамическую таблицу в DOM. Как это сделать используя метод live? Я никак не пойму как по отдельности сделать и делегирование и вызов плагина. Вызов плагина отдельно — понятно, а вот в live что прописывать? Нужен ли там Click? А в функции что писать? — наум приходит только вложить в неё плагин, но, как Вы говорите, это вариант, да и, действительно так ничего не работает. Уже весь мозг сломал, подскажите, пожалуйста как надо сделать?

    • Андрей Кудлай

      Роман, для того, чтобы Вам помочь, мне как минимум нужно знать, что Вы хотите делать и видеть Ваш код. Без этого я могу дать только общие рекомендации: на метод live нужно повесить событие клика, по которому и выводится таблица — это одна часть кода. Другая часть кода — это вызов плагина для этой таблицы. Примерно так. И это, по идее, должно работать… хотя могу и ошибаться, конечно, здесь нужно только пробовать.

  9. Роман

    Андрей, вот код, максимально урезанный — только суть:

  10. Роман

    html не принимает сайт. В общем вывод таблицы осуществляется через кнопку с id=»confirm_btn_vr» в div.class=»vivod_stroki», в котором вставлен php тэги между которыми вызывается функция chisloStrok_vr().Эта функция описана выше, только сайт обрезал все html-тэги.

  11. Алексей

    В таблице, скажем, 200 строк, по умолчанию выводятся первые 20. Есть функция обработки двойного клика по строке таблицы. Но эта функция срабатывает только по первым 20 строкам таблицы, с 21-й «молчит».
    В скрипте менял значение size, но при первом выводе таблица выходит вся, а это могут быть сотни строк.
    Как это дело исправить?

  12. Павел

    Зачем писать jQyery(document).ready…, если можно (и нужно) $(document).ready…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree