Иногда при верстке сайта, нужно сделать таблицу с возможностью сортировки. Скажем для сортировки товаров в интернет магазине.
Пример использования:
Сделать это совсем не сложно! Для начала создадим саму таблицу:
Код 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" />
<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();
}
);
{
$("#myTable").tablesorter();
}
);
На экране вы увадите:
| Фамилия | Имя | Платеж | Сайт | |
|---|---|---|---|---|
| Иванов | Петр | 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 |
Понажимайте на заголовки таблицы и увидите, как сортируются столбцы. Так же можно посмотреть пример в отдельном окне.
Так же возможно задать тип сортировки. Для этого нужно прописать соответствующие параметры. Список параметров можно посмотреть на .