Javascript сортировки таблицы (sorttable.js) от Stuart Langridge

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

Скачать пример (вместе с sorttable.js)

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

Шаг 1: вставляем sorttable.js

Создаем новую страницу и вставляем тег со ссылкой на 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 body–>
<tbody>
<tr>
<td>Apple Inc</td>
<td>AAPL</td>
</tr>

<tr>
<td>GoogleInc</td>
<td>GOOG</td>
</tr>
</tbody>

<!– 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 class=”sortable”>
<!– Table Header –>
<thead>
<tr>
<th>Company</th>
<th>Ticker</th>
</tr>
</thead>

<!– Table body–>
<tbody>
<?php while ($row = mysql_fetch_array($getCompany)) {?>
<tr>
<th><?php echo $row.['companyName'] ?></th>
<th><?php echo $row.['companyTicker'] ?></th>
</tr>
<?php } ?>
</tbody>

<!– Table footer–>
<tfoot>
<tr>
<td> … </td>
<td>…. </td>
</tr>
</tfoot>
</table>

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru