От автора: приветствую вас, друзья. Очередная статья из цикла о лучших jQuery плагинах. Сегодня мы рассмотрим один из самых простых в установке и применении плагинов jquery для сортировки таблиц – речь о плагин sorttable.js.
Задача сортировки табличных данных может встать перед вами, если вы работаете с относительно большими таблицами и хотите упростить для пользователя работу с табличными данными на странице. Сортируя табличные данные по различным колонкам, пользователь легко сможет упорядочить данные в нужном ему порядке, что значительно упростит работу с этими данными.
С озвученной задачей легко справляется плагин jQuery для сортировки таблицы — jquery sorttable.js. К тому же, используя плагин, вы получаете еще одну симпатичную фишку для вашего сайта. Итак, приступим к установке плагина.
Скачать плагин можно из репозитория на GitHub или просто возьмите из исходников к статье. Нам потребуется файл sorttable.js и папка с картинками стрелок, указывающих на направление сортировки. Подключим файл плагина и библиотеку jQuery:
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/sorttable.js"></script> |
Само собой, нам потребуется некоторая таблица с тестовыми данными, например такая:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table class="table table-bordered table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> ... </tbody> </table> |
После этого достаточно вызвать для нужной таблицы метод addSortWidget():
1 2 3 |
$(function(){ $("table").addSortWidget(); }); |
Собственно, это все. Теперь мы можем сортировать колонки таблицы в нужном нам порядке, например по имени. Плагин jQuery для сортировки таблицы по столбцу позволяет сортировать по любому столбцу.
Стоит упомянуть, что метод addSortWidget() может принимать параметром путь к картинкам. Соответственно, вы можете указать и свои картинки, и указать при необходимости произвольный путь к ним.
Ну а у меня на сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!