Сортировка данных в таблице с jQuery плагином TableSorter

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

Сортировать данные в таблице - это очень удобный функционал, но возможно вы от него отказывались по причине того, что думали его реализация займет много времени и сил.
С помощью jQuery плагина TableSorter, добавить возможность сортировки данных в любую таблицу, можно буквально за несколько минут.
Ну что приступим от слов к делу :)

1. Скачиваем архив плагина сортировки табличных данных


2. Подключаем скрипт и стили к своему документу

Открываем скаченный архив плагина, у вас перед глазами будет примерно такая картина.
Из архива копируем папку themes со стилями для нашей таблицы и сам скрипт сортировки данных jquery.tablesorter.min.js.

Теперь осталось все это дело подключить к вашей страничке, все как всегда в блоке head:

Теперь есть пара моментов, относительно html структуры ваших таблиц, они должны иметь теги thead, tbody, вот пример:

	<table id="myTable" class="tablesorter">
		<thead>
		<tr>
		    <th>Название поста</th>
		    <th>URL адрес</th>
		    <th>Дата создания</th>
		    <th>Описание</th>
		    <th>Ключевые слова</th>
		</tr>
		</thead>
		<tbody>
		<tr>
		    <td>Pluso — социальные кнопки на сайт</td>
		    <td>http://webcomplex.com.ua/on-line-instrumenty/pluso-socialnye-knopki-na-sajt.html</td>
		    <td>09.07.2014</td>
		    <td>В этом посте я расскажу о сервисе социальных кнопок для вашего сайта - Pluso</td>
		    <td>социальные иконки, социальные кнопки</td>
		</tr>
		<tr>
		    <td>Форма подписки с помощью СSS3</td>
		    <td>http://webcomplex.com.ua/html/forma-podpiski-s-pomoshhyu-sss3.html</td>
		    <td>07.07.2014</td>
		    <td>Форма подписки с помощью СSS3</td>
		    <td>форма, форма подписки, Форма подписки СSS3</td>
		</tr>
		<tr>
		    <td>Плагин jQuery Cookie. Просто и удобно</td>
		    <td>http://webcomplex.com.ua/jquery/plagin-jquery-cookie-prosto-i-udobno.html</td>
		    <td>06.07.2014</td>
		    <td>Сегодня мы познакомимся с jQuery Cookie плагином, который сводит нашу задачу к весьма элегантному и главное простому решению.</td>
		    <td>cookie, куки, jquery cookie</td>
		</tr>
		<tr>
		    <td>Всплывающее окно при каждом новом заходе пользователя на сайт</td>
		    <td>http://webcomplex.com.ua/jquery/vsplyvayushhee-okno-pri-kazhdom-novom-zaxode-polzovatelya-na-sajt.html</td>
		    <td>07.07.2014</td>
		    <td>Сегодня мы сделаем всплывающее окно, которое будет появляться при каждой новой сессии вашего посетителя. Сессия пользователя обновляется при вкл/выкл браузера клиента.</td>
		    <td>Popup-окна, всплывающие окна, окно, popup, pop-up</td>
		</tr>
		</tbody>
	</table>

Когда сама таблица готова, присваиваем ей идентификатор в моем примере это id="myTable", по нему мы будем применять функцию сортировки.
А вот и сам код скрипта который вам нужно добавить в ваш js файл:

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

3. Радуемся результатом

Просмотреть пример и скачать исходники вы можете по ссылкам, которые находятся ниже :)
Если зажать клавиши Ctrl+Shift и нажать на заголовок нескольких столбцов, то можно таким образом осуществить сортировку одновременно по выбранным колонкам!

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

Выводы

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

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

Делясь ссылкой на пост в социальных сетях - Вы помогаете развитию блога! Спасибо ;)

(1 голосов. Рейтинг: 5,00 из 5)
Loading...Loading...

Метки: ,

Рубрика: jQuery, Программы и скрипты, Скачать

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

| RSS комментария

  1. cooledit:

    Не получается реализовать скрипт в таблице с кастомными полями в wordpress, где выводятся числовые значения.
    Я так понимаю, данный скрипт только для статических таблиц? В петле его нельзя использовать?

    • WebCo:

      Добрый день, опишите подробнее, что именно не получается или дайте ссылку на ваш пример, так мне сложно вам что-то подсказать.
      На счет статических данных, то тут тоже нужно смотреть как и что вы добавляет, возможно стоит вызывать функцию сортировки каждый раз после динамического добавления (или обновления) таблицы.

  2. Алексей:

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

    • Алексей:

      Разобрался, всё работает кроме переходов, т.е не переходит только назад. В чем может проблема быть? Вперед работает, вначало и вконец тоже.

  3. Александр:

    Вы издеваетесь что ли? самого скрипта-то нету, ни в демках, ни на оф сайте о_О

Оставьте свой комментарий