| |
Главная
О проекте
Web-мастеру
HTML & JavaScript
SSI
Perl
PHP
XML & XSLT
Unix Shell
MySQL
Безопасность
Хостинг
Другое
|
|
JavaScript : Сортировка по столбцам таблицы без перезагрузки страницы.
К примеру у Вас есть таблица.
| Name |
Salary |
Extension |
Start date |
| Bloggs, Fred |
$12000.00 |
1353 |
18/08/2003 |
| Turvey, Kevin |
$191200.00 |
2342 |
02/05/1979 |
| Mbogo, Arnold |
$32010.12 |
2755 |
09/08/1998 |
| Shakespeare, Bill |
$122000.00 |
3211 |
12/11/1961 |
| Shakespeare, Hamnet |
$9000 |
9005 |
01/01/2002 |
| Fitz, Marvin |
$3300 |
5554 |
22/05/1995 |
Нужно сделать так, чтобы при нажатии на шапку - таблица пересортировывалась по выбранному столбцу
| Name |
Salary |
Extension |
Start date |
| Bloggs, Fred |
$12000.00 |
1353 |
18/08/2003 |
| Turvey, Kevin |
$191200.00 |
2342 |
02/05/1979 |
| Mbogo, Arnold |
$32010.12 |
2755 |
09/08/1998 |
| Shakespeare, Bill |
$122000.00 |
3211 |
12/11/1961 |
| Shakespeare, Hamnet |
$9000 |
9005 |
01/01/2002 |
| Fitz, Marvin |
$3300 |
5554 |
22/05/1995 |
Как видно - при нажатии на нужный столбец - таблица пересортировывается по нему.
Для использования нужно:
- Подключить необходимый скрипт к странице: <script src="sorttable.js"></script>
- Назначить нужной таблице класс "sortable": <table class="sortable">
- Придумать уникальный ID: <table class="sortable" id="unique_id">
Это все, что нужно. Css, который может приукрасить таблицу:
/* Sortable tables */
table.sortable a.sortheader {
background-color:#eee;
color:#666666;
font-weight: bold;
text-decoration: none;
display: block;
}
table.sortable span.sortarrow {
color: black;
text-decoration: none;
}
|
|
|