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

Добрый день!
Очень нужна помощь, есть шаблон вывода фотогалереи в одной очень экзотической 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 (будет фамилия, в алфавитном порядке). Сортировать хотел бы налету при загрузке страницы.

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

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

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

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

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

Temofei,

return a.title > b.title ? 1 : -1

сортировка после загрузки
 

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: