Вход

Просмотр полной версии : Нужна помощь - сортировка фотографий с помощью JS


Temofei
29.07.2019, 07:30
Добрый день!
Очень нужна помощь, есть шаблон вывода фотогалереи в одной очень экзотической CMS
{reduce:space}
{mask:main}
<div class="command-list"><div class="command-list_in">
{mask:item}{if: {img}}
<div class="command-one">
<div class="command-image"><a href="/images/0/{img}" class="fancybox" rel="gallery" title="{title}"><figure><img src="/images/1/{img}" alt=""/></figure></a></div>
<div class="foto-title">{title}</div>
</div>
{/}{/mask}
</div></div>
<div class="back-link rightpos">
<a href="{backurl}"><span></span> К списку альбомов</a>
</div>
{/mask}


На просторах интернета нашел пример сортировки с помощью JS, но, чувствую, что-то не то делаю.. знания самые начальные.. нужна ваша помощь
<script>
var body = document.getElementById("command-image");
var listElms = body.getElementsByClassName("fancybox");
var sortedElms = Array.prototype.slice.call(listElms).sort(function (a, b) {
return a.dataset.title > b.dataset.title
});

for (var i = 0; i < sortedElms.length; i++) {
body.appendChild(sortedElms[i]);
}
</script>

Сортировать хотел бы по названию - title (будет фамилия, в алфавитном порядке). Сортировать хотел бы налету при загрузке страницы.

laimas
29.07.2019, 07:42
Сортировать хотел бы налету при загрузке страницы

В этом случаен что мешает входные данные отсортировать сразу на сервере?

Temofei
29.07.2019, 13:59
В этом случаен что мешает входные данные отсортировать сразу на сервере?

Мешает говно CMS, задача есть, решить ее как-то надо, а времени колупаться с CMS нету. В ней даже есть какая-то сортировка, но она не работает.

laimas
29.07.2019, 14:05
В ней даже есть какая-то сортировка, но она не работает.

Какая именно? Большая вероятность того, что данные отдаваемые в шаблонизатор, это результат запроса в базу, и если данные для title из нее же, то нудно указать сортировку выборки по этому полю. Чего копаться то, в запросе только указать нужное.

А на клиенте нужно сравнивать a.title и b.title.

Temofei
29.07.2019, 14:08
Какая именно? Большая вероятность того, что данные отдаваемые в шаблонизатор, это результат запроса в базу, и если данные для title из нее же, то нудно указать сортировку выборки по этому полю. Чего копаться то, в запросе только указать нужное.

А на клиенте нужно сравнивать a.title и b.title.

CMS Софтмажор :-/

j0hnik
30.07.2019, 02:21
Temofei,
return a.title > b.title ? 1 : -1

рони
30.07.2019, 09:32
Temofei,
<script>
addEventListener("DOMContentLoaded", () => {
const sliders = document.querySelectorAll(".command-list_in"),
collator = new Intl.Collator(["en", "ru"], { numeric: true }),
comparator = (a, b) => collator.compare(
a.querySelector("[title]").title,
b.querySelector("[title]").title);
for(const slider of sliders) {
slider.append(...[...slider.children].sort(comparator))
}
})
</script>

Temofei
30.07.2019, 21:34
Temofei,
<script>
addEventListener("DOMContentLoaded", () => {
const sliders = document.querySelectorAll(".command-list_in"),
collator = new Intl.Collator(["en", "ru"], { numeric: true }),
comparator = (a, b) => collator.compare(
a.querySelector("[title]").title,
b.querySelector("[title]").title);
for(const slider of sliders) {
slider.append(...[...slider.children].sort(comparator))
}
})
</script>

Спасибо! Все заработало! Аллилуйя! :dance: