Сортировка таблицы средствами JavaScript
В одной из предыдущих заметок я писал о сортировке столбцов таблицы. Однако, речь шла о сортировке на стороне сервера. Было бы удобно иметь возможность сортировки без перезагрузки страницы, т.е. на стороне клиента. Один из вариантов решения этой задачи — скрипт Стюарта Лангриджа sorttable.js. Подключаем его в разделе head HTML-страницы:
<script src="sorttable.js" type="text/javascript"></script>
Для таблицы должен быть определен класс class=”sortable”. Допускается применить этот класс для нескольких таблиц на странице. Каждая таблица должна содержать thead, tbody и tfoot.
PHP:
<?php
$dblocation = "localhost"; // Имя сервера
$dbuser = "root"; // Имя пользователя
$dbpswrd = ""; // Пароль
$dbname = "catalog"; // Имя базы данных
// Соединение с сервером базы данных
$dblink = mysql_connect( $dblocation, $dbuser, $dbpswrd );
mysql_query( 'SET NAMES cp1251' );
// Выбираем базу данных
mysql_select_db( $dbname, $dblink );
?>
<html>
<html>
<title>Сортировка таблицы</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
table.sortable{border:0; padding:0; margin:0; width: 70%}
table.sortable td{padding:4px; border-bottom:solid 1px #DEDEDE;}
table.sortable th{padding:4px; cursor:pointer}
table.sortable thead{text-align:left; background:#e3edef; color:#333333;}
table.sortable tfoot{font-weight:bold; }
table.sortable tfoot td{border:none;}
</style>
<script type="text/javascript" src="sorttable.js"></script>
</head>
<body>
<?php
// Формируем запрос на извлечение товарных позиций
$query = 'SELECT code, title, description, price
FROM products
ORDER BY title';
$res = mysql_query($query);
echo '<table class="sortable">';
echo '<thead>';
echo '<tr>';
echo '<th>Код</th>';
echo '<th>Наименование</th>';
echo '<th>Описание</th>';
echo '<th>Цена</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';
while( $prd = mysql_fetch_array( $res ) ) {
echo '<tr>';
echo '<td>'.$prd['code'].'</td>';
echo '<td>'.$prd['title'].'</td>';
echo '<td>'.$prd['description'].'</td>';
echo '<td align="right">'.$prd['price'].'</td>';
echo '</tr>';
}
echo '</tbody>';
echo '<tfoot></tfoot>';
echo '</table>';
?>
</body>
</html>
$dblocation = "localhost"; // Имя сервера
$dbuser = "root"; // Имя пользователя
$dbpswrd = ""; // Пароль
$dbname = "catalog"; // Имя базы данных
// Соединение с сервером базы данных
$dblink = mysql_connect( $dblocation, $dbuser, $dbpswrd );
mysql_query( 'SET NAMES cp1251' );
// Выбираем базу данных
mysql_select_db( $dbname, $dblink );
?>
<html>
<html>
<title>Сортировка таблицы</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
table.sortable{border:0; padding:0; margin:0; width: 70%}
table.sortable td{padding:4px; border-bottom:solid 1px #DEDEDE;}
table.sortable th{padding:4px; cursor:pointer}
table.sortable thead{text-align:left; background:#e3edef; color:#333333;}
table.sortable tfoot{font-weight:bold; }
table.sortable tfoot td{border:none;}
</style>
<script type="text/javascript" src="sorttable.js"></script>
</head>
<body>
<?php
// Формируем запрос на извлечение товарных позиций
$query = 'SELECT code, title, description, price
FROM products
ORDER BY title';
$res = mysql_query($query);
echo '<table class="sortable">';
echo '<thead>';
echo '<tr>';
echo '<th>Код</th>';
echo '<th>Наименование</th>';
echo '<th>Описание</th>';
echo '<th>Цена</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';
while( $prd = mysql_fetch_array( $res ) ) {
echo '<tr>';
echo '<td>'.$prd['code'].'</td>';
echo '<td>'.$prd['title'].'</td>';
echo '<td>'.$prd['description'].'</td>';
echo '<td align="right">'.$prd['price'].'</td>';
echo '</tr>';
}
echo '</tbody>';
echo '<tfoot></tfoot>';
echo '</table>';
?>
</body>
</html>
Ссылки по теме:
Оставьте свой отзыв