Сортировка

Иногда при верстке сайта, нужно сделать таблицу с возможностью сортировки. Скажем для сортировки товаров в интернет магазине.

Пример использования:

Сделать это совсем не сложно! Для начала создадим саму таблицу:

Код HTML
<table id="myTable"> 
<thead> 
<tr> 
    <th>Фамилия</th> 
    <th>Имя</th> 
    <th>Email</th> 
    <th>Платеж</th> 
    <th>Сайт</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Иванов</td> 
    <td>Петр</td> 
    <td>ivanov@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.ivanov.ua</td> 
</tr> 
<tr> 
    <td>Петров</td> 
    <td>Иван</td> 
    <td>petrov@yandex.ru</td> 
    <td>$50.00</td> 
    <td>http://www.petrov.com.ru</td> 
</tr> 
<tr> 
    <td>Сергеев</td> 
    <td>Михаил</td> 
    <td>sergeed@mail.ru</td> 
    <td>$100.00</td> 
    <td>http://www.sergeev.ru</td> 
</tr> 
<tr> 
    <td>Михайлов</td> 
    <td>Потап</td> 
    <td>medvedev@rambler.ru</td> 
    <td>$50.00</td> 
    <td>http://www.yandex.com</td> 
</tr> 
</tbody> 
</table>

Затем подключим jQuery и плагин tablesorter в двух частях: js 1 и js 2 и стили css.

Код HTML
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<link href="tablesorter.css" rel="stylesheet" type="text/css" />

Теперь осталось только заставить tablesorter работать:

Код Javascript(jQuery)
$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);

На экране вы увадите:

Фамилия Имя Email Платеж Сайт
Иванов Петр ivanov@gmail.com $50.00 http://www.ivanov.ua
Петров Иван petrov@yandex.ru $50.00 http://www.petrov.com.ru
Сергеев Михаил sergeed@mail.ru $100.00 http://www.sergeev.ru
Михайлов Потап medvedev@rambler.ru $50.00 http://www.yandex.com

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

Так же возможно задать тип сортировки. Для этого нужно прописать соответствующие параметры. Список параметров можно посмотреть на сайте.

Вверх