П О Р Т А Л                            
С Е Т Е В Ы Х                          
П Р О Е К Т О В                        
  
Поиск по сайту:
                                                 
Главная

О проекте

Web-мастеру
     HTML & JavaScript
     SSI
     Perl
     PHP
     XML & XSLT
     Unix Shell

MySQL

Безопасность

Хостинг

Другое








Самое читаемое:

Учебник PHP - "Для Чайника".
Просмотров 178765 раз(а).

Иллюстрированный самоучитель по созданию сайтов.
Просмотров 76465 раз(а).

Учебник HTML.
Просмотров 74559 раз(а).

Руководство по PHP5.
Просмотров 45555 раз(а).

Хостинг через призму DNS.
Просмотров 52560 раз(а).

Подборка текстов стандартных документов.
Просмотров 45588 раз(а).

Учебник PHP - Самоучитель
Просмотров 51804 раз(а).

Документация на MySQL (учебник & справочное руководство)
Просмотров 52284 раз(а).

Внешние атаки...
Просмотров 42340 раз(а).

Учебник PHP.
Просмотров 37754 раз(а).

SSI в примерах.
Просмотров 28107 раз(а).



 
 
| Добавить в избранное | Сделать стартовой | Помощь





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

 

Как видно - при нажатии на нужный столбец - таблица пересортировывается по нему.

Для использования нужно:

  1. Подключить необходимый скрипт к странице: <script src="sorttable.js"></script>
  2. Назначить нужной таблице класс "sortable": <table class="sortable">
  3. Придумать уникальный 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;
}


Если Вы не нашли что искали, то рекомендую воспользоваться поиском по сайту:
 





Copyright © 2005-2016 Project.Net.Ru