Сортировка таблицы на JavaScript

Несколько дней назад я искал хороший и простой способ сортировки данных в таблице простым нажатием на заголовки таблицы и нашел интересный скрипт от Стюарта Лангриджа (Stuart Langridge) sorttable.js.

Это руководство объясняет, как использовать его в своих проектах:

Шаг 1: вСоздаем новую страницу и вставляем тег со ссылкой на sorttable.js

<script src="sorttable.js" type="text/javascript"></script>

Шаг 2: HTML код для дизайна сортируемой таблицы

Создать новую таблицу и добавляем для нее класс «sorttable».

<style type="text/css">
body{font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#555555;}
div.main{margin:30px auto; width:600px;}
table.sortable{border:0; padding:0; margin:0;}
table.sortable td{padding:4px; width:120px; border-bottom:solid 1px #DEDEDE;}
table.sortable th{padding:4px;}
table.sortable thead{background:#e3edef; color:#333333; text-align:left;}
table.sortable tfoot{font-weight:bold; }
table.sortable tfoot td{border:none;}
</style>

<table class="sortable"> ... </table>

Если на одной страницы у Вас более чем одна таблица, Вы можете применить этот класс для всех таблиц, которые хотите сортировать. Общая структура для каждой таблицы которую нужно упорядочить содержит (заголовок таблицы), (таблица тела) и
(подвал таблицы) как следующем примере:

<table class="sortable">
<!- Table Header ->
<thead>
<tr>
<th>Company</th>
<th>Ticker</th>
</tr>
</thead>

<!- Table footer->
<tfoot>
<tr>
<td>Total</td>
<td> 00.00</td>
</tr>
</tfoot>
</table>

При нажатии на заголовок (в данном примере «Company» или «Ticker») все строки в будет отсортированы в возрастающем или убывающем порядке.

Шаг 3: Заполнить таблицу в ряд данными с использованием PHP

Вы можете заполнить таблицу некоторыми данными с использованием одного из языков, таких, как PHP, Coldfusion, ASP или аналогичные. Если вы используете PHP вы можете использовать этот простой код:

<?php
// Include connection to your database
include('dbconnection.php');
$getCompany_sql = 'SELECT * FROM COMPANY';
$getCompany= mysql_query($getCompany_sql);?>

<!- Table footer->
<tfoot>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tfoot>
</table>

Пользуйтесь ;) Скачать пример вместе с sorttable.js можно здесь

h++p://blogwm.ru/sort-table-rows/