В этом уроке Вы узнаете как сделать красивую таблицу с данными с возможностью сортировки по любому столбцу.
Это довольно полезная штука, особенно когда таблицы очень большие.
Первым делом подключаем стили оформления между тегами <head></head>:
<link rel="stylesheet" href="style.css" />
Внешний вид таблицы можно легко изменить, если покопаться в стилях.
Далее создаем непосредственно саму таблицу:
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<thead>
<tr>
<th class="nosort"><h3>ID</h3></th>
<th><h3>Name</h3></th>
<th><h3>Phone</h3></th>
<th><h3>Email</h3></th>
<th><h3>Zip</h3></th>
<th><h3>Birthdate</h3></th>
<th><h3>Last Access</h3></th>
<th><h3>Rating</h3></th>
<th><h3>Done</h3></th>
<th><h3>Salary</h3></th>
<th><h3>Score</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ezekiel Hart</td>
<td>(627) 536-4760</td>
<td><a href="mailto:#">tortor@est.ca</a></td>
<td>53082</td>
<td>12/02/1962</td>
<td>March 26, 2009</td>
<td>-7</td>
<td>7%</td>
<td>$73,229</td>
<td>6.9</td>
</tr>
.........
</tbody>
</table>
Вместо многоточия должны быть ряды с информацией. Как Вы видите столбцу ID мы придали класс "nosort", таким образом мы убрали возможность сортировки для него. Всей таблице был присвоен класс "sortable".
Далее идет блок с кнопками навигации по таблице:
<div id="controls">
<div id="perpage">
<select onchange="sorter.size(this.value)">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span>Entries Per Page</span>
</div>
<div id="navigation">
<img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
<img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
<img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
<img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
</div>
<div id="text">Displaying Page <span id="currentpage"></span> of <span id="pagelimit"></span></div>
</div>
Вначале идет настройка отображения количества рядов на странице (по умолчанию стоит 10, но Вы можете выбрать любое значение), далее кнопки ручного перехода со страницы на страницу и текстовая информация о странице, на которой Вы находитесь.
И в конце нам необходимо инициализировать саму функцию сортировки (можно это сделать после таблицы):
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("table",1);
</script>
Все готово. Пользуйтесь :) Всего наилучшего.