jQuery плагин Сортировка Таблицы — скачать бесплатно!

Бесплатный jQuery плагин сортировки данных столбцов в таблице без перезагрузки страницы — HTML 5.1 и сортировка, готовые решения, пример и использование плагина tSort.js.

jquery сортировка таблицы

В спецификации HTML 5.1 уже есть упоминание модели сортировки таблицы. Когда-то мы сможем использовать атрибуты sortable, sorted и т. д., но пока используем JavaScript.

Отмечу:

  • статью А. Шуркаева «Сортировка столбцов в таблице без перезагрузки» (читать здесь) — на «чистом» JavaScript, что иногда очень удобно;
  • плагин jQuery для сортировки таблиц TableSorter К. Баха (Christian Bach) — продвинутый и расширяемый (читать на русском);
  • сам я использовал только DataTables, но он тоже продвинутый.

Во всех предложенных вариантах — всё сложно. Нужен был самый простой — но его я не нашёл, пришлось писать. Так появился jQuery плагин «Сортировка Таблицы» — tSort.js, весом 574 байта.

Шаг 1: создадим таблицу
Особенность tSort.js — TH-ячейки с «названиями колонок» должны быть в теге THEAD, а TD-ячейки остальных строк таблицы в теге TBODY:

<table class="tsort">
<thead>
 <tr>
  <th>Col 1</th>
   <th>Col 2</th>
   <th>Col 3</th>
 </tr>
</thead>
<tbody>
 <tr>
   <td>1</td>
   <td>5</td>
   <td>first</td>
 </tr>
 <tr>
   <td>3</td>
   <td>2</td>
   <td>second</td>
 </tr>
 <tr>
   <td>5</td>
   <td>1</td>
   <td>third</td>
 </tr>
</tbody>
</table>

Шаг 2: подключим CSS таблицу стилей «Сортировка Таблиц»
Разместите файл tsort.css у себя на сервере и подключите его после закрывающегося тега </HTML>:

</body>
</html>
<link rel="stylesheet" type="text/css" href="/2015/11/tsort.css">

Примечания:

  • если вы используете своё оформление таблицы — пропустите этот шаг;
  • в случае необходимости, можете скопировать строки из файла tsort.css в тег STYLE — они не займут много места;
  • tsort — основной CSS-класс для оформления таблицы, указывается в атрибуте class тега TABLE;
  • плагин tSort.js добавляет два вспомогательных CSS-класса: sel (для ячейки сортируемой колонки) и asc (тип сортировки для ячейки сортируемой колонки);
  • для отображения «типа сортировки» используются графические файлы, которые в tsort.css берутся с серверов Google.

Шаг 3: подключим библиотеку jQuery
Для работы плагина подключите библиотеку jQuery. Советую делать это перед закрывающимся тегом </BODY>, используя хранилище Google:

<script src="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

Шаг 4: подключим jQuery плагин «Сортировка Таблицы»
Разместите файл tsort.min.js у себя на сервере и подключите его после строки подключения библиотеки jQuery:

<script src="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/2015/11/tsort.min.js"></script>
</body>
</html>

Примечание: в случае необходимости, можете скопировать код из файла tsort.min.js в тег SCRIP — он не займёт много места.

Шаг 5: активируем сортировку данных в таблицах
Активация плагина происходит в удобный для вас момент и представляет собой JavaScript код:

$('.tsort').tsort();

Примечание: активировать плагин «Сортировка Таблицы» лучше после его подключения, используя CSS класс tsort, служащий для оформления таблиц.

По ссылке вы можете скачать ZIP-архив (3,30 Кб), который содержит: паку images/ с графическими файлами стрелочек: up.gif и dw.gif, CSS-файл tsort.css с оформлением таблицы, два варианта JavaScript-файлов плагина: tsort.js (читабельный) и tsort.min.js (сжатый) и пример использования tsort.html.

Скачать бесплатно!

Короткая ссылка: http://goo.gl/OWjvqZ