Нативная сортировка?

Question

[iDrugov]

Впервые озадачился вопросом сортировки табличных данных (да и вообще любых данных) и нагуглил множество стареньких статей. Варианты с сортировкой DOMa средствами JS или получение отсортированной таблицы из БД средствами PHP мне понятны в рамках "старых" решений.

Поскольку мне тяжко даётся англоязычная литература, решил спросить тут -- появилось ли в настоящее время что-то ещё, касающееся сортировок и фильтров? Мало ли фишек могли нафаршировать в HTML5 или даже CSS3.

Также, если вдруг есть весьма нативное решение сортировки HTML-таблицы средствами PHP (без подключения к БД), то будет также интересно про него почитать.

----

Сама задача строится на том, что я получу список средствами js (из API) и потому хочу отправить его сразу в таблицу, которую пользователь будет фильтровать и сортировать. Отправлять эту таблицу в БД ради сортировок - звучит, как так себе решение )

Всевозможные библиотеки не интересуют, так как хочется научиться кодить, а не библиотеки подключать.

Comments

[Demian Smith]

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

<script src="скучная_билиотека_которая_всё_сделает_за_меня.js">

. Сейчас это называется "фреймворк" и их не подключают к проекту, а строят проект на их основе. Покодить вам прийдётся еще как. Просто вы будете программировать на другом уровне: вместо того чтоб описывать низкоуровневую работу по созданию ajax запросов и прослушиванию моделей вы будете запрашивать данные, связывать их с коллекциями, сортировать эти коллекции, строить разметку на основе моделей из коллекции. По пути вы освоите работу с промисами или реактивным программирование, возможно, узнаете о том что такое неизменяющиеся состояния и с чем их едят. В целом, как современный программист, вы вырастите гораздо выше, если сразу начнёте использовать реакт или ангуляр, как посоветовал Froggyweb. По пути вам может стать интересно как что-то реализовано внутри самих фреймворков, для этого всегда можно заглянуть в их исходный код. Такие дела.

Answer 1

[iDrugov]

В общем, самая "нативная" сортировка (не без участия jQuery) у меня получилась следующим образом:
Все данные в ячейках я вношу в data-attribute, которые легализованы в HTML5. Чтобы метод sort() работал так, как мне надо -- данные привожу в к нижнему регистру и заменяю кавычки на апострофы, чтобы не возникла конфликта на уровне HTML.

об этом тоже есть порно вопрос
< td data-val="данные 'с кавычками' из ячейки">Данные "с кавычками" из ячейки< /td>

1. Клик по th возвращает мне номер столбца
2. Собираю из td с этим индексом значения в data-val
3. Использую .sort() и .sort().reverse() для создания сортировки по возрастанию и убыванию.

Далее в ход идёт jQuery с чудесным методом detach(), который "вырезает" элемент со страницы, не удаляя данных о нём. И затем этот элемент я вставляю после первой строки, тем самым сортируя табличные данные: $($(sortElem).detach()).insertAfter('table tr:first-child');, где sortElem = $('[data-val="'+массив с данным+'"]').parent()[0]; -- parent возвращает мне весь tr

Ну и всё это, конечно с циклами, чтобы проходиться по массивам.

Получилось, в принципе, достаточно коротко, работает шустро, сортирует относительно правильно. Единственная проблема -- числа сортируются 1, 10, 11, ... 2, 20, 21 и т.д. Но это немного позже прогуглю, как исправить, т.к. в рамках моего проекта пока не очень критично.

Answer 2

[gleendo]

data.sort(); // сортировка данных
table.render(); // отображение отсортированных данных

Answer 3

[Froggyweb]

Если хочется кодить то ангулар или реакт

Comments

[iDrugov]

Вопрос именно большей частью к HTML5, PHP7 или вдруг в CSS-гридах в 4м релизе что-то появится.

Фреймворки-то у меня и так есть.

[Froggyweb]

iDrugov: насколько я знаю то больше ничего не поменялось.