Сортировка на сайте на Java Script

M
На сайте с 24.04.2009
Offline
98
115

Добрый день. Прошу помочь разобраться.

Сайт выводит товары. Необходимо сделать сортировку по мощности и по цене и всё это вывести на странице. Данные берутся из XML файла. Как я понимаю, то по мощности сортировать надо переменную  data-power, а по цене  data-price (выделены жирным).  Подскажите, как это сделать? Какой необходим код? Вот основная часть кода, которая выводит товары:

<TMPL_VAR NAME="INCLUDE_FILE">

      <div class="framed" style="float:left">

        <TMPL_LOOP NAME='products'>

         <div class="catitem" data-phases="<TMPL_VAR NAME='phases'>" data-power="<TMPL_VAR NAME='power'>"  data-price= " <TMPL_VAR NAME='price'>"  >

            <div style="float:left; height:64px;"> <a href="/elektrooborudovanie/<TMPL_VAR NAME='code'>"><h2><TMPL_VAR NAME='trademark'> <TMPL_VAR NAME='model'></h2></a> <div style="margin-top: -12px;"><TMPL_VAR NAME='category'></div> <a href="/elektrooborudovanie/<TMPL_VAR NAME='code'>"> <img src="/products/img/<TMPL_VAR NAME='image'>" style="margin-top: 5px;"></a> <div class="textabc"><TMPL_VAR NAME='texta'></br><TMPL_VAR NAME='textb'></br><TMPL_VAR NAME='textc'></div> </div>

<div class="descr">

<TMPL_VAR NAME='description'>

</div>

<div class="descr">

               <table><TMPL_LOOP NAME='characteristics'>

                <tr><th><TMPL_VAR NAME='name'></th><td><TMPL_VAR NAME='value'></td></tr>

              </TMPL_LOOP></table>

            </div>

            <div class="ctrl" style="float:left;">

              <div class="price" style="float:left;"><TMPL_VAR NAME='price'> <span style="font-size:16pt;">руб.</span></div>

              <TMPL_IF NAME="available">

                <div class="availability available" style="float:left;">Есть в наличии</div>

              <TMPL_ELSE>

                <!-- <div class="availability unavailable" style="float:left;">Нет в наличии</div> -->

              </TMPL_IF>

              <!-- <div class="btn btn-black"><a href="/elektrooborudovanie/<TMPL_VAR NAME='code'>">Подробнее</a></div>  -->

  <TMPL_IF NAME="available">

              <div class="btn btn-red buy one-click_buy" style="float:left;" data-code="<TMPL_VAR NAME='code'>" data-image="<TMPL_VAR NAME='image_big'>"><a href="/buy.php?product=<TMPL_VAR NAME='code'>">Купить</a></div>

  </TMPL_ELSE>

  <img src="/theme/img/prodout_2.jpg" style="margin-top:8px;">

  </TMPL_IF>

</div>

          </div>

        </TMPL_LOOP>

      </div>

IL
На сайте с 20.04.2007
Offline
418
#1

https://stackoverflow.com/questions/14160498/how-can-i-sort-elements-by-numerical-value-of-data-attribute&nbsp;

Разве что, удобнее делать это с кодом, который уже сгенерирован (посмотреть в браузере)

How can I sort elements by numerical value of data attribute?
How can I sort elements by numerical value of data attribute?
  • 2013.01.04
  • JayDee JayDee 1,523 4 4 gold badges 20 20 silver badges 31 31 bronze badges
  • stackoverflow.com
I have multiple elements with the attribute: , is there a way of sorting the elements into ascending order with the lowest value first using either JavaScript or jQuery? Desired result:
... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
Aisamiery
На сайте с 12.04.2015
Offline
216
#2
А мне вот такая штука нравится https://isotope.metafizzy.co/
Isotope · Filter & sort magical layouts
Isotope · Filter & sort magical layouts
  • isotope.metafizzy.co
Package managers Install with Bower: License Commercial license If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Isotope commercial licensing. Once purchased, you’ll receive a...
Разработка проектов на Symfony, Laravel, 1C-Bitrix, UMI.CMS, OctoberCMS

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий