Для вывода большого количества данных с кратким описанием наиболее оптимальным решением является таблица
Сегодня научимся сортировать таблицы с помощью модуля Tablesorter. Он имеет довольно широкую функциональность, благодаря тому, что основу функциональные возможности JavaScript библиотеки jQuery.
Сначала подключим к необходимому документу библиотеку jQuery и файл с модулем jquery.tablesorter.min.js. Эти компоненты необходимы для работы с модулем Tablesorter.
<script src="jquery-1.6.1.min.js" type="text/javascript"></script> <script src="jquery.tablesorter.min.js" type="text/javascript"></script>
Теперь сооружаем таблицу, которую должны подключить к Tablesorter.
Так она должна выглядеть:
<table id="user_list"> <thead> <tr> <th>№ в списке</th> <th>Никнейм</th> <th>Email</th> <th>Баланс</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>user_1</td> <td>user_1@gmail.com</td> <td>29.77</td> </tr> <tr> <td>2</td> <td>user_2</td> <td>user_2@gmail.com</td> <td>29.00</td> </tr> <tr> <td>3</td> <td>user_3</td> <td>user_3@gmail.com</td> <td>59.05</td> </tr> <tr> <td>4</td> <td>user_4</td> <td>user_4@gmail.com</td> <td>2.33</td> </tr> </tbody> </table>
Построение структуры таблицы
Таблица складывается из основного контейнера <table>…</table>, в котором должен находится контейнер заголовков, оформленный тегами <thead>…</thead>. В этом контейнере располагается строка с необходимым контентом, заключенным тегами <th>…</th>. И все тело таблицы обрамляется с помощью <tbody>…</tbody>. На самом деле это все просто. Нужно лишь раз попробовать.
И наконец, задействуем модуль Tablesorter:
$(document).ready(function() {
$("#user_list").tablesorter();
});
После всех работ таблицу можно сортировать. Можно это делать по умолчанию. Используем код для такого действия:
$(document).ready(function() {
$("#user_list").tablesorter({sortList: [[0,1]]});
});
После чего видно, что таблица сортируется по колонке (№ в списке) в обратном направлении.
Смотрим полный исходник кода:
<!DOCTYPE html>
<html>
<head>
<title>Tablesorter</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="jquery.tablesorter.pager.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#user_list").tablesorter({sortList: [[0,1]]});
});
</script>
</head>
<body>
<table id="user_list">
<thead>
<tr>
<th>№ в списке</th>
<th>Никнейм</th>
<th>Email</th>
<th>Баланс</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user_1</td>
<td>user_1@gmail.com</td>
<td>29.77</td>
</tr>
<tr>
<td>2</td>
<td>user_2</td>
<td>user_2@gmail.com</td>
<td>29.00</td>
</tr>
<tr>
<td>3</td>
<td>user_3</td>
<td>user_3@gmail.com</td>
<td>59.05</td>
</tr>
<tr>
<td>4</td>
<td>user_4</td>
<td>user_4@gmail.com</td>
<td>2.33</td>
</tr>
</tbody>
</table>
</body>
</html>
В статье расмотрено основное назначение модуля. Раскрыта лишь малая часть, которую можно рассказать о модуле Tablesorter.
