tablesorter – это плагин для jQuery, который способен преобразовать обычную HTML таблицу в сортируемую. Он автоматически определяет тип данных ячеек таблицы (числа, даты, IP-адреса) и соответствующим образом сортирует их.
Как использовать
Подключите скрипты jquery.js и jquery.tablesorter.js:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.tablesorter.js"></script>
В HTML документе создайте таблицу, причем теги thead и tbody должны обязательно присутствовать:
<table id="myTable">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
Далее создаем сортируемую таблицу используя функцию tablesorter():
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
Можно также передавать различные параметры в tablesorter(): sortList – каким образом и какие колонки нужно отсортировать, cssHeader – какой класс установить для заголовков, cancelSelection – запретить ли выделение текста в ячейках и др. Полный список опций смотрите здесь.
Также вместе с плагином доступны темы оформления таблиц.
