Сортування таблиць за допомогою плагіна TableSorter.js

15

Від автора: Дуже часто на веб-сторінках необхідно відображати дані за допомогою таблиць. Таблиця дуже зручний засіб для подання величезної кількості даних, що відносяться до певної тематики. Але якщо в одній таблиці відображається близько сотні рядків а то й більше, це значно ускладнює пошук потрібної інформації. Тому в даному уроці ми з Вами розглянемо зручний і простий плагін для бібліотеки jquery, який дозволяє організувати сортування таблиць на її полях.

Сортування таблиць за допомогою плагіна TableSorter.jsСортування таблиць за допомогою плагіна TableSorter.js

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

Насамперед давайте встановимо плагін tablesorter.js для цього переходимо на сайт http://tablesorter.com/docs/

Сортування таблиць за допомогою плагіна TableSorter.js

Потім клацаємо по посиланню Download:

Сортування таблиць за допомогою плагіна TableSorter.js

І завантажуємо архів з бібліотекою – посилання jquery.tablesorter.zip. Для даного уроку я підготував наступну сторінку:

Сортування таблиць за допомогою плагіна TableSorter.js

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

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

Далі в фалі script.js додамо наступний код:

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

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

Сортування таблиць за допомогою плагіна TableSorter.js

Налаштування плагіна

$(«#myTable»).tablesorter({
sortList:[[1,0]],
sortForce:[[3,0]],
widgets:[‘zebra’],
cancelSelection:false
debug:true
headers:{
1:{
сортувальник:false
}
}
});

Плагін підтримує наступні налаштування:

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

sortForce – примусова сортування. Яке б поле не вибрав користувач для сортування, вибране в цьому параметрі полі, завжди буде брати участь у сортуванні;

widgets – кожна не парний рядок, зафарбовується в певний колір;

cancelSelection – якщо true, забороняє виділення тексту в шапці таблиці;

debug – режим відладки;

headers – використовуючи цю властивість, можна заборонити сортування по вибраних полях таблиці.

Сортування таблиць за допомогою плагіна TableSorter.js

Посторінкова навігація

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

Сортування таблиць за допомогою плагіна TableSorter.js
Сортування таблиць за допомогою плагіна TableSorter.js
Сортування таблиць за допомогою плагіна TableSorter.js
Сортування таблиць за допомогою плагіна TableSorter.js
2
4
6
8

Далі необхідно викликати метод 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– блок, який буде використовуватися як кнопка для переходу до останньої сторінки.

Тепер оновивши сторінку, ми побачимо наступне:

Сортування таблиць за допомогою плагіна TableSorter.js

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!