Цитата дня :

Первое впечатление, к сожалению, никогда не бывает достаточно обманчивым.

( Александр Михеев )

Дизайн - оригинальный внешний вид, легкость восприятия, удобство использования и точная направленность на потребителя товара, услуги, информации...
Полиграфия - разработка эскизов, верстка и полная допечатная подготовка любой полиграфической продукции от рекламных плакатов до визитных карточек, включая фотосъемку и подготовку иллюстраций...
Создание веб-сайтов - размещение на своих серверах, техническая поддержка и развитие интернет-проектов любого уровня сложности, от статических персональных страниц до распределенных корпоративных сайтов с системами электронной коммерции и online-платежами.

| Скрипты для сайта | Модули для сайта | CMS, администрирование сайта |
Сортировка по столбцам таблицы без перезагрузки страницы

Сортировка по столбцам таблицы без перезагрузки страницы.

К примеру у Вас есть таблица.

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;
}

 











Дети наше будущее
Создание сайта для благотворительного фонда.

Новый год детям
Создание сайта. Участие в благотворительном фонде помощь детям.

Как получить управляемый сайт дешего





Наши клиенты:




Популярные:

Создание сайта визитки за 300 рублей...

Безопасные цвета для сайта

Веб дизайн, создание сайтов, шаблоны, фирменный стиль, предоставление хостинга 
info@web-palette.ru Студия веб дизайна Web-Palette.ru 2002-2015   (495)514-35-23
Rambler's Top100
Яндекс.Метрика