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

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

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


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

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

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

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

01<table id="myTable" class="tablesorter">
02    <thead>
03    <tr>
04        <th>Название поста</th>
05        <th>URL адрес</th>
06        <th>Дата создания</th>
07        <th>Описание</th>
08        <th>Ключевые слова</th>
09    </tr>
10    </thead>
11    <tbody>
12    <tr>
13        <td>Pluso — социальные кнопки на сайт</td>
14        <td>//webcomplex.com.ua/on-line-instrumenty/pluso-socialnye-knopki-na-sajt.html</td>
15        <td>09.07.2014</td>
16        <td>В этом посте я расскажу о сервисе социальных кнопок для вашего сайта - Pluso</td>
17        <td>социальные иконки, социальные кнопки</td>
18    </tr>
19    <tr>
20        <td>Форма подписки с помощью СSS3</td>
21        <td>//webcomplex.com.ua/html/forma-podpiski-s-pomoshhyu-sss3.html</td>
22        <td>07.07.2014</td>
23        <td>Форма подписки с помощью СSS3</td>
24        <td>форма, форма подписки, Форма подписки СSS3</td>
25    </tr>
26    <tr>
27        <td>Плагин jQuery Cookie. Просто и удобно</td>
28        <td>//webcomplex.com.ua/jquery/plagin-jquery-cookie-prosto-i-udobno.html</td>
29        <td>06.07.2014</td>
30        <td>Сегодня мы познакомимся с jQuery Cookie плагином, который сводит нашу задачу к весьма элегантному и главное простому решению.</td>
31        <td>cookie, куки, jquery cookie</td>
32    </tr>
33    <tr>
34        <td>Всплывающее окно при каждом новом заходе пользователя на сайт</td>
35        <td>//webcomplex.com.ua/jquery/vsplyvayushhee-okno-pri-kazhdom-novom-zaxode-polzovatelya-na-sajt.html</td>
36        <td>07.07.2014</td>
37        <td>Сегодня мы сделаем всплывающее окно, которое будет появляться при каждой новой сессии вашего посетителя. Сессия пользователя обновляется при вкл/выкл браузера клиента.</td>
38        <td>Popup-окна, всплывающие окна, окно, popup, pop-up</td>
39    </tr>
40    </tbody>
41</table>

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

01$(document).ready(function()
02    {
03        $("#myTable").tablesorter();
04    }
05);

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

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

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

Выводы

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

(1 голосов. Рейтинг: 5,00 из 5)
Загрузка...

Метки: ,

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

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

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

  1. cooledit:

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

    • WebCo:

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

  2. Алексей:

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

    • Алексей:

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

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

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

  4. Здравствуйте, а можно ли сделать сортировку сначала по дате, затем по региону.
    PS. Чтоб следующая сортировка не отменяла первую?

    • Дмитрий Британ:

      Да, можно, для этого нужно зажать кнопку Shift и клацнуть мышкой по заголовку нужной колонки.

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