Топ плагинов jQuery. Плагин для сортировки таблиц

Топ плагинов jQuery. Плагин для сортировки таблиц

От автора: приветствую вас, друзья. Очередная статья из цикла о лучших jQuery плагинах. Сегодня мы рассмотрим один из самых простых в установке и применении плагинов jquery для сортировки таблиц – речь о плагин sorttable.js.

Задача сортировки табличных данных может встать перед вами, если вы работаете с относительно большими таблицами и хотите упростить для пользователя работу с табличными данными на странице. Сортируя табличные данные по различным колонкам, пользователь легко сможет упорядочить данные в нужном ему порядке, что значительно упростит работу с этими данными.

С озвученной задачей легко справляется плагин jQuery для сортировки таблицы — jquery sorttable.js. К тому же, используя плагин, вы получаете еще одну симпатичную фишку для вашего сайта. Итак, приступим к установке плагина.

Скачать плагин можно из репозитория на GitHub или просто возьмите из исходников к статье. Нам потребуется файл sorttable.js и папка с картинками стрелок, указывающих на направление сортировки. Подключим файл плагина и библиотеку jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/sorttable.js"></script>

Само собой, нам потребуется некоторая таблица с тестовыми данными, например такая:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
<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():

$(function(){
 $("table").addSortWidget();
});

Собственно, это все. Теперь мы можем сортировать колонки таблицы в нужном нам порядке, например по имени. Плагин jQuery для сортировки таблицы по столбцу позволяет сортировать по любому столбцу.

Топ плагинов jQuery. Плагин для сортировки таблиц

Стоит упомянуть, что метод addSortWidget() может принимать параметром путь к картинкам. Соответственно, вы можете указать и свои картинки, и указать при необходимости произвольный путь к ним.

Ну а у меня на сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree