Апреля 13, 2010 | by Макс | Несколько дней...

апреля 13, 2010 | by Макс | Несколько дней назад я искал хороший и простой способ сортировки данных в таблице простым нажатием на заголовки таблицы и нашел интересный скрипт от Стюарта Лангриджа (Stuart Langridge) sorttable. js. Это руководство объясняет, как использовать его в своих проектах: Шаг 1: вСоздаем новую страницу и вставляем тег со ссылкой на sorttable. js Шаг 2: HTML код для дизайна сортируемой таблицы Создать новую таблицу и добавляем для нее класс “sorttable”. 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;}

Если на одной страницы у Вас более чем одна таблица, Вы можете применить этот класс для всех таблиц, которые хотите сортировать. Общая структура для каждой таблицы которую нужно упорядочить содержит (заголовок таблицы), (таблица тела) и (подвал таблицы) как следующем примере:

Company Ticker
Apple Inc AAPL
GoogleInc GOOG
Total 00.00

При нажатии на заголовок (в данном примере “Company” или “Ticker”) все строки в будет отсортированы в возрастающем или убывающем порядке. Шаг 3: Заполнить таблицу в ряд данными с использованием PHP Вы можете заполнить таблицу некоторыми данными с использованием одного из языков, таких, как PHP, Coldfusion, ASP или аналогичные. Если вы используете PHP вы можете использовать этот простой код: // Include connection to your database include(‘dbconnection. php’); $getCompany_sql = ‘SELECT * FROM COMPANY’; $getCompany= mysql_query($getCompany_sql);?>

Company Ticker

Пользуйтесь ;) Скачать пример вместе с sorttable. js можно здесь h++p://blogwm. ru/sort-table-rows/ Теги: JavaScript

Понравилась статья? Получай обновления и будь всегда в курсе событий!
Подпишись на RSS или
blog comments powered by Disqus