Как сделать сортировку в таблице php
Обновлено: 08.07.2024
Узнать, как создать сортированную таблицу HTML с помощью JavaScript.
Сортировать
| Имя | Страна |
|---|---|
| Berglunds snabbkop | Швеция |
| North/South | Великобритания |
| Alfreds Futterkiste | Германия |
| Koniglich Essen | Германия |
| Magazzini Alimentari Riuniti | Италия |
| Париж specialites | Франция |
| Island Trading | Великобритания |
| Laughing Bacchus Winecellars | Канада |
Создание функции сортировки
Пример
function sortTable() <
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable");
switching = true;
/* Сделайте цикл, который будет продолжаться до тех пор, пока
никакого переключения не было сделано: */
while (switching) <
// Начните с того: переключение не выполняется:
switching = false;
rows = table.rows;
/* Цикл через все строки таблицы (за исключением
во-первых, который содержит заголовки таблиц): */
for (i = 1; i y.innerHTML.toLowerCase()) <
// Если это так, отметьте как переключатель и разорвать цикл:
shouldSwitch = true;
break;
>
>
if (shouldSwitch) <
/* Если переключатель был отмечен, сделайте переключатель
и отметьте, что переключатель был сделан: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
>
>
>
Сортировка таблицы по заголовкам
Щелкните заголовки, чтобы отсортировать таблицу.
Нажмите "Имя", чтобы отсортировать по имени "Страна", чтобы отсортировать по странам.
Минимальный набор для сортировки HTML-таблицы
Эта концепция отличается от концепции Tiny sorter следующими моментами:
Сортировка по нескольким колонкам: как должна вести себя программа? Если отсортировать столбец 1, после этого сортировка столбца 2 должна идти из исходного состояния таблицы, или из результата первой сортировки? Мы (и TinyTable) выбираем последнее. Ну, и не надо нажимать Shift для сортировки по нескольким столбцам – это для слишком умных пользователей, настолько умные пользователи и так сообразят, как это сделать. Вот, например, таблица городов, надо последовательно отсортировать её по всем трём колонкам – части света, страны, города.
| Часть света | Страна | Город | Деньги |
|---|---|---|---|
| Европа | Франция | Руан | 100 р. |
| Европа | Франция | Париж | 90 р. |
| Европа | Германия | Дрезден | 91р. |
| Европа | Германия | Берлин | 10 р. |
| Азия | Китай | Шанхай | 1.1 р. |
| Азия | Китай | Пекин | 2.03 р. |
| Азия | Индия | Бомбей | 22.5р. |
| Азия | Индия | Дели | 22.4 р. |
Ну и щёлкайте последовательно по всем трём столбцам, только в обратном порядке: Город, Страна, Часть света – таблица окажется отсортированной, как нужно.
Подключение скрипта сортировки к HTML-странице
Надеемся, что для нашего Простого Сортировщика достигнута предельная простота подключения:
- Нужно вписать в HEAD страницы две инструкции:
- и .
- Добавить тэгам сортируемых таблиц атрибут .
- Ну, и скопировать в папку страницы на сервере файлы tabsort0.css, tabsort0.js и папку img из архива Simple Table Sorter.
Подключать TinyTable сложнее: кроме перечисленных действий нужно ещё вписать в конец HTML-страницы скрипт с инструкцией, инициирующей создание объекта table.sorter и запускающую функцию подготовки таблицы с параметром – ID элемента TABLE. Да. А если с ID что-нибудь напутаешь, выйдет ошибка.
Что внутри (движок сортировки)
Наш javascript-код сортировки HTML-таблиц так прост, что об этом даже и говорить смешно. Две функции, 57 строк. И куча технологических хитростей. Вот некоторые из них.
Наш скрипт не быстрее TinyTable или jquery.sorter – может быть, на доли секунды медленнее. Но он рассчитан на таблицу в 100-200 строк; при таких объёмах разница в скорости не играет роли (её трудно заметить).
Веб-сайт в одной странице: самый короткий учебник HTML
Комментарии
Oleg, ну, например, можно в цикле серверного скрипта, выводящего таблицу, поставить счётчик $i, увеличивающийся для каждой строки на единицу, и если $i % 2 (нечётное), добавлять тэгу tr className:
Ну насчет желания дизайнера тут не поспоришь. Я просто высказал некие усредненные ожидания (на мой взгляд) конечного пользователя от том, как он желает "видеть" таблицу. А вот за ссылку о том, где почитать, как присылать зебру готовой с сервера или на работающий скрипт был бы весьма признателен.
Самый лучший скрипт из тех, что удалось найти для сортировки небольших таблиц. Только вот отказ от "зебры" в пользу подсветки строки, на мой взгляд, на таблицах малого размера (до 50 строк) сомнителен. Обычно такие таблицы "просматривают глазами", а не "проводят по ним пальцем", и "зебра" в этом случае была бы более кстати.
Oleg, наверное, вы правы, и зебра чаще всё-таки нужна (например, на Сапе зебра есть у любого размера таблиц). Но это больше вопрос общего дизайна, проектирования. Я на каждом конкретном сайте делаю, как прикажет дизайнер.
И кстати, зебру можно присылать уже готовой с сервера, она может быть вполне независимой от js.
San, в приведённом примере всё сортируется нормально. Поле datrec там – обычная строка.
Файл tabsort0.js, кстати, надо вам надо перекодировать (страница в windows-1251, а скрипт сейчас в utf-8)
Возможно не ново, у скрипта версии 0.1 замечена неправильная сортировка по дате. http://ais.san.org.ua/search/0.1/limit200.htm – модифицированный пример, поле "datrec".
Доброго времени суток. Спасибо большое за скрипт, очень пригодился. Установил, все хорошо. устраивает на все 100. Но возник один вопрос. У меня в таблице, есть две строки(tr), скажем с классом "title". Так вот, подскажите пожалуйста, как сделать так что б при сортировке скрипт не трогал эти строки? что б они оставались на своих местах, а все другое сортировалось. Заранее благодарен.
Игорь, скрипт не может пропускать строки при сортировке. Такую возможность надо добавлять руками. В цикле создания массива для сортировки (начинается со строки for (j; j лесник 13.06.2012 14:09:17
Alexander, для поля типа ip нужен отдельный обработчик, у меня его нет. Очевидно, что такой тип данных нельзя сортировать просто как строку или как число.
VILor, версия 2.1 - один из экспериментов, я не использую его на практике и не дорабатываю. Рабочие - два направления: 0.01, 0.02, . они описываются в этой статье (Simple Table Sorter), и 1.01 (tabsort1_01.aspx, Big Table Sorter). В версии с единицей впереди есть фильтры и постраничный вывод (в этом отличие от версий, начинающихся с нуля). Если в этих версиях что-то не работает, я исправляю. В других - нет.
Неправильно сортирует поле IP (x.x.x.x). Непонятно, кстати, почему.
Создал динамически таблицу, подключил твой скрипт сортировки. Я только начал изучать javascript, если поможешь разобраться будет просто здорово. Проверял IE6,0 и Google Chrome. В версии 2.1 размножается фильтр, на одну таблицу две строки фильтра, если добавлять таблицы на страницу на каждую последующию +1 сторка в фильтре. При этом сортируются стороки, к которым добавляется строка из секции TFOOT html таблицы. При этом одна строка из секции TFOOT остается на месте (сортируется ее дупликат) В версии 1 все хорошо (мне подходит больше из-за наличия страниц), но при добавлении двух таблиц, когда щелкаешь по стрелкам перехода страниц, записи в таблице переходят в той, которая была активной последней, независимо от того в какой таблице пытаемся перелистнуть страницу.
А пример с пустыми столбцами надо смотреть, так, заочно сказать что-то трудно.
Лучше указывать точные адреса примеров, а то я не могу понять, о чём речь. И лучше работать с последними примерами, упоминающимися на сайте. Последняя статья о сортировке была – tabsort004.aspx. Предпоследняя, кажется, – tabsort003.aspx
отличный скрипт. спасибо. использую версию 0.01
подметил глюк в первой и в последней версиях(другие не проверял): если кликнуть : 1.по любому столбцу 2.по столбцу слева от кликнутого в 1-ом 3.и опять по 1-ому – отсортирует по порядку 2-го столбца. пробовал обе версии под свою талицу – глючат. самостоятельно не могу найти в чём проблема, но подметил, что таблица на этой странице работает без глюка, а таблица в последнем примере с глюком.
Поставил скрипт и все сортируется, но появился небольшой баг – справа от столбцов появились пустые столбцы, подскажите как с этим бороться?
Ребят, спасайте :D Сортировка на высоте! Но, возникла проблема.. Некорректно сортируются некоторые строки, я думаю из-за двоеточий и знаков "•" в строках, как решить эту проблему ? И ещё, но уже менее важный вопрос, каким способом можно отсортировать дату, вида: "Январь 2012"
Михаил,
Вот, сделал в новой версии предопредлённую сотрировку:
Можно также указывать сортируемый первым столбец прямо в ячейке заголовка, в атрибуте axis:
По рекомендации AleXH во все версии Простого сортировщика добавил сброс состояния таблицы (reset) по Ctrl+Click (на заголовчных ячейках).
Все, проблемку решил. Табличку просто нужно подгрузить через appendChild и все заработает как часики.
Твой код просто супер, нигде на просторах инета такого кода нет, везде с какими то недостатками. СПАСИБИЩИЕ тебе ))) Так держать.
По поводу других пожеланий – никого не слушай, кому нужно – тот при желании сам подгонит под себя, колоссальная работа за них уже проделана, пусть не леняться.
А может мне кто нибудь объяснить поподробней как решить мою проблему.
Суть вот в чем: у меня таблица динамически подгружается в index.php из стороннего файла table.php, если я напрямую обращаюсь к table.php, то все гуд, а вот у подгружаемой в index.php – нет, таблица отображается, а сортировки не происходит ((( Как быть.
У Вас написано, что можно цеплять и к динамически созданной таблице, ток вот она у меня создается не в Java, а в php. Помогите плиз
1) Я не знаю, должен ли цвет стрелок оставаться неизменным при многих кликах по одному столбцу. Ну, поскольку мне всё равно, а вам зачем-то надо, сделал по-вашему.
5) Какой вообще смысл сортировать таблицу в 1000 строк минимальным сортировщиком? Ведь javascript-разбивка на страницы решает проблему скорости даже в IE. И работать с таблицей удобнее (всё равно вы не выведете на один экран все 1000 строк, надо листать в любом случае).
Может есть возможность подсвечивать столбцы по которым выбрана сортировка цветом? Оттенок цвета сделать более насыщенным у отсортированных позже. Желающие изменить оттенки смогут "подкрутить" их в css.
Если мои предложения идут вразрез с позиционированием данной версии сортировщика, то можно эти куски кода в js закомментировать. Тот, кому понадобится данный сервис, сможет их попросту раскомментировать.
Есть желание сортировать этой версией сортировщика таблицу с ~1000 строк.
В общем я так и думал, до написания вопросов я ознакомился с более "продвинутыми" версиями.
В текущей реализации js имеется недочёт – при клике больше одного раза подряд на один и тот же столбец инкрементируется переменная a_color, в то время как в этом случае она должна оставаться неизменной.
Атрибуту axis="num|str|date" отводится очень большая роль, но у же в следующей жизни Сортировщика – в Big Table Sorter'е (tabsort1.aspx). В текущей версии (Simple Table Sorter) я некоторое время колебался, потом решил оставить определение типов автоматическим, без участия пользователя (здесь все типы сводятся к строковому). В Большом же Сортировщике типы должны быть указаны явно (а то работать не будет).
Насчёт Зебры тоже были колебания: начались они с колоссальных тормозов в старых IE при любых попытках менять оформление "по ходу" сортировки; завершились пониманием того, что Зебра в принципе не очень нужна – важнее "подсветка" при наведении мыши. Подсветка, кажется, работает во всех современных браузерах (на CSS, псевдо-класс hover). "Остатки" Зебры не убрал по той же причине, что и "зачатки" axis'а – кому надо, легко могут добавить для себя Зебру самостоятельно.
D.M., admin, excellent! :) Работает как в FF 3.6.20, так и в Opera 11.50.
Имхо теперь всё правильно – в пределах пересекающихся множеств сохраняется монотонность убывания, либо возрастания сортировки. Конечное направление сортировки в пределах пересекающихся множеств определяется чётным, либо нечётным количеством столбцов отсортированных в обратном направлении.
До конца не понял следующие моменты: 1. В js в отличие от css, почему-то задействованы только 8 картинок вместо 10: ----------------- if (a_color лесник 26.08.2011 17:25:07
Alex, ещё раз спасибо за тестирование. Версии пока назначать нет смысла, так как замеченное вами – явные баги. То есть это ещё пока даже и не релиз, типа альфа-версия. Вот если после очередных исправлений не найдёте ошибок, можно будет и версию дать, что-нибудь вроде 1.00000001.
Ошибки исправил, в архив добавил. Там дело было в том, что javascript многозначные (после запятой) числа по умолчанию отображает в виде 1.16e-7. Надо было сразу добавить toFixed(), а я поторопился. Величина таблицы тут ни при чём: у меня изначально в тестовом варианте таблица в 200 строк, но там нет пустых значений или повторяющихся в достаточном объёме (чтобы обнаружить проблему).
Ваша таблица для проверки: table150.html (я проверял не по группам, так как не понял, что это такое, а по первому столбцу идентификаторов).
Может в скрипт и css добавить в первую строку комментарии с номерами версий? Речь пойдёт о предыдущем варианте js без миллиарда. Производим сортировку в таблице выше (table.html из table.7z) в FF. Нажимаем: обновить страницу – ID [отсортировано по возрастанию] – Sellers [отсортировано по возрастанию] – Sellers [отсортировано по убыванию]. И тут мы видим, что столбец Sellers отсортирован правильно, но внутри групп Sellers также произведена сортировка, что в корне неверно, так как сортировка внутри групп должна сохраняться неизменной.
Где-то ведь я что-то такое видел у конкурентов! Но не обратил в своё время внимания. Оказывается, ИЕ и Опера просто ВООБЩЕ не сортируют одинаковые значения, а хватают их как попало. Для учёта этой особенности пришлось в сортируемом массиве добавить к каждому сортируемому значению его порядковый номер, делённый на миллион (или миллиард. – в общем, много-много нулей после запятой, и в конце число).
FF 3.6.20 – палец ошибся ) Таблица: 111 222 331 412 521 632 Код:
| A | B | C |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 2 | 2 |
| 3 | 3 | 1 |
| 4 | 1 | 2 |
| 5 | 2 | 1 |
| 6 | 3 | 2 |
2 D.M., admin Проверялось в FF 3.6.30, Opera 11.50, IE 6.0. Скрипт simple сортирует правильно только в FF. Например входная таблица (ABC заголовки столбцов): A B C 1 1 1 2 2 2 3 3 1 4 1 2 5 2 1 6 3 2 Последовательно кликаем на ABC. FF 3.6.20, результат правильный: A B C 1 1 1 5 2 1 3 3 1 4 1 2 2 2 2 6 3 2 Opera 11.50, результат неправильный: A B C 1 1 1 5 2 1 3 3 1 4 1 2 6 3 2 2 2 2 IE 6.0, результат неправильный: A B C 3 3 1 5 2 1 1 1 1 6 3 2 2 2 2 4 1 2
Может у вас есть вариант скрипта учитывающий косяки IE и Opera?
Огромное спасибо, просто подключается, доступно объяснил человеку, который в скриптах ничего не понимает. css подправил под себя и все .
В общем, причину не нашел, но использовав "китайские хитрости" сделал, как мне надо. Вопрос снят :)
Вы всё правильно поняли. Что-то у меня значит не так. Хотя что может быть не так? Скрипт ведь работает. Я "в трёх соснах заблудился", блин.
Ну, не знаю. Превратил пару городов в примере в ссылки. Вроде, при сортировке ничего не изменилось. Может, я неправильно понимаю проблему? "Сортировки по нескольким колонкам" как таковой ведь нет: просто следующая сортировка происходит на основе текущего (отсортированного) состояния таблицы (а не из исходного состояния).
Недавно заметил, что не работает "Сортировка по нескольким колонкам" – начал читать статью – оказалось, что эта функция предусмотрена и в добавок работает в примере. Это наверное как-то связано с тем, что сортируется не текст, а ссылки?
Посмотрел я наверх, и действительно: удивительно, удивительно. Думаю, причина в Опере (она всегда отличалась своей необычностью). В общем, чудо.
Забыл, версия оперы – 11.01
Александр, спасибо за отзыв!
Он менее "чудесный" (код более корявый), но может сохранять состояние сортировки и работает.
Спасибо за чудесный скрипт. А как сделать так, чтобы сортировать таблицу при загрузке по столбцу?
Извентиляюсь)По что то не подумал даже!Вопрос решен файл tabsort0.js сохр в UTF-8)))Запарился
Здравствуйте. Поставил Simple Table Sorter и заметил у себя глюк с последней строкой в опере – после сортировки, последняя строка ВНЕШНЕ не изменяется, но при наведении на неё курсора всё становится нормально. Повторюсь только в опере. Не подскажите в чём причина?
(Ниже: 1, загружена полная таблица: 2, загружаются только записи семейства, соответствующие "конденсатор")
КОД: (имя файла, index.php)
- Можете ли вы включить таблицу, которая отображается после запуска PHP?
- Меня немного смутила ваша просьба. Я добавил изображения до и после того, как я запустил весь скрипт, включая PHP. Раньше по умолчанию загружалась вся таблица. После этого делается выбор (конденсатор), и таблица фильтруется путем запроса MySQL с этим выбором фильтра.
- Извините, я имел в виду обработанный HTML-код таблицы.
- Изображения - это скриншоты веб-сайта localhost, на котором я запускаю скрипт. Это то, что вы имеете в виду?
- В своем ответе я воссоздал таблицу. Я имел в виду окончательный текст HTML, поэтому мне не пришлось его переписывать.
Каждый раз, когда вы заказываете или фильтруете данные, datatable отправляет массив со всей необходимой информацией, поэтому вы просто просматриваете массив и соответственно генерируете свои запросы.
Вы можете добавить в форму выпадающий список сортировки и использовать его в своем запросе. Таким образом, вы можете позволить пользователю выбрать метод сортировки и обработать его на стороне сервера.
В вашем заявлении if:
Если вы не хотите использовать специальную библиотеку сортировки таблиц, вы сможете сделать это самостоятельно. Вот решение, которое извлекает все данные из предоставленного массива данных, которые вы должны легко предоставить с помощью PHP.
- Вау, спасибо за подробности! Я скоро попробую :)
- 1 Нет проблем! Для меня это был хороший урок сортировки. Если вам нужны какие-либо объяснения или предложения, не стесняйтесь комментировать.
Вы можете сохранить $ _POST ['family'] в скрытом поле (возможно, $ _POST ['hidden_family']). Когда вы выполняете поиск на следующем уровне, вы можете проверять его и каждый раз добавлять в поиск, если он не пустой.
Вот как вы численно сортируете свою таблицу:
1) дайте предполагаемой таблице идентификатор (в моем кодовом случае это основная таблица)
2) Вызывайте функцию сортировки каждый раз, когда вы нажимаете на заголовки таблицы (включая номер столбца, первый - 0, каждый раз, когда вы добавляете дополнительные столбцы, увеличивайте число внутри имени функции на единицу, в данном случае sortTable (0), sortTable (1) ), .
Окончательный результат будет примерно таким (проверьте этот пример, он работает):
В сегодняшнем уроке мы рассмотрим основные моменты, которые касаются сортировки данных массива в PHP. Вы узнаете наиболее важные встроенные в PHP функции, которые предназначены для сортировки массивов.
Введение в сортировку массивов в PHP
Довольно часто приходится сортировать данные в массивах. Возможно, вам нужно это делать в алфавитном или числовом порядке, в порядке возрастания или убывания. Для этого PHP предоставляет несколько полезных функций. В следующем разделе мы покажем вам, как использовать эти функции. Для начала возьмем небольшой массив в качестве примера:
Теперь, если вы выведете массив, вы увидите элементы в том же порядке, в котором они были определены:
Результат будет следующим:
Теперь перейдем к процессу сортировки этого массива.
Основные функции сортировки массива в PHP
Для сортировки массива в PHP вы можете использовать встроенные функции sort и rsort . Разница между ними заключается в том, что rsort сортирует массив в обратном порядке (по убыванию), а sort – в обычном порядке (по возрастанию).
Давайте посмотрим, как это работает. Отсортируем массив с помощью функции sort , прежде чем отобразить его содержимое. Код выглядит так:
Результат будет следующим:
Как вы могли заметить, эта функция назначает новые ключи для элементов в массиве. Функция сортировки sort удаляет все существующие ключи, которые вы могли назначить, вместо того, чтобы просто переупорядочивать ключи. Решение этой проблемы рассмотрим позже.
Если вам нужен обратный порядок, единственное, что вам нужно сделать, это использовать вместо этого функцию rsort , например, так:
И результат будет следующий:
Теперь давайте узнаем, как решить проблему с потерей ключей, что важно, если вы используете ассоциативные массивы.
Сортировка ассоциативных массивов в PHP
Как мы видели ранее, функции sort и rsort не подойдут, если нам нужно сохранить ключи нашего массива. К счастью, в PHP есть встроенные функции и для этой проблемы. Функции называются asort и arsort . По примеру вышерассмотренных функций, asort сортирует по возрастанию, а arsort – по убыванию. Кроме этого, данные функции поддерживают сохранение ключей массива. Итак, давайте посмотрим, как эти функции справляются с сортировкой данных в массиве. Повторим наш тест с использованием новых функций:
Результат будет следующим:
Теперь результат выглядит намного лучше. Чтобы получить сортировку в обратном порядке, просто используйте функцию arsort вместо asort .
Но что делать, если вы хотите отсортировать ассоциированные массивы на основе ключей? Нет проблем, давайте посмотрим как это сделать.
Как сортировать массив по ключу в PHP
Вы уже вероятно догадались, что в PHP есть функция сортировки ассоциативного массива по ключам. Этими функциями являются ksort и krsort . Как и прежде, krsort сортирует массив в обратном порядке. Использование такое же, как и раньше, поэтому код будет следующим:
Результат будет следующим:
Использовать функцию довольно krsort просто.
Помимо рассмотренных функций в PHP есть и другие, более сложные функции сортировки:
Бонусный навык: поиск в массиве с помощью PHP
Представьте себе, что у вас есть большой массив, который заполняется из файла или кода. И вы не знаете, существует ли данное значение в массиве или нет. И если оно существует, то было бы хорошо получить ключ этого элемента.
Массив рассмотрим тот же (что в самом начале статьи).
Теперь, если вы хотите узнать, существует ли значение blue , вы можете использовать встроенную в PHP функцию array_search() . Ниже пример ее использования:
Читайте также: