отсортировать таблицу по цене

176

26 сентября 2018, 05:50

Есть таблица

<table class="search_header_tab"> 
  <thead> 
    <tr> 
      <td class="r_q" data-targ="q">Объект<i></i></td> 
      <td class="r_f" data-targ="f">Этаж<i></i></td> 
      <td class="r_rc" data-targ="type_rc">Комнат<i></i></td> 
      <td class="r_sq" data-targ="sq">Площадь, м<sup>2</sup><i></i></td> 
      <td class="r_tc multi" data-targ="tc"><span>Стоимость, руб</span><i></i></td> 
      <td class="r_renovation rotated_td" data-targ="renovation"><span>Отделка</span><i></i></td> 
      <td class="r_res rotated_td add_td" data-targ="res"><span>Забронировать</span></td> 
    </tr> 
  </thead> 
  <!--</table>--> 
  <!--<table class="search_result_tab accel" style="transform: translate3d(0px, 0px, 0px);">--> 
  <tbody class="bg-sp"> 
    <tr data-path="serdtse-stolitsy" id="n121" class="tdheight"> 
      <td class="r_q"> 
        Самая лучшая новостройка 
      </td> 
      <td class="r_f">6</td> 
      <td class="r_rc">1</td> 
      <td class="r_sq">15</td> 
      <td class="r_tc">21212</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n119" class="tdheight"> 
      <td class="r_q"> 
        Самая лучшая новостройка 
      </td> 
      <td class="r_f">Эта</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n118" class="tdheight"> 
      <td class="r_q"> 
        tyr555 
      </td> 
      <td class="r_f">Эта</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n117" class="tdheight"> 
      <td class="r_q"> 
        vsdvsdv 
      </td> 
      <td class="r_f">Эта</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n116" class="tdheight"> 
      <td class="r_q"> 
        Самая лучшая новостройка 
      </td> 
      <td class="r_f">Эта</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n115" class="tdheight"> 
      <td class="r_q"> 
        vsdvsdv 
      </td> 
      <td class="r_f">Эта</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n114" class="tdheight"> 
      <td class="r_q"> 
        1111111111 
      </td> 
      <td class="r_f">Эта</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n113" class="tdheight"> 
      <td class="r_q"> 
        vsdvsdv 
      </td> 
      <td class="r_f">Эта</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n112" class="tdheight"> 
      <td class="r_q"> 
        tyrhge 
      </td> 
      <td class="r_f">1</td> 
      <td class="r_rc">3</td> 
      <td class="r_sq">16</td> 
      <td class="r_tc">251515</td> 
      <!--<td class="r_tcnd">0</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n111" class="tdheight"> 
      <td class="r_q"> 
        Самая лучшая новостройка 
      </td> 
      <td class="r_f">4</td> 
      <td class="r_rc">3</td> 
      <td class="r_sq">16</td> 
      <td class="r_tc">32</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n110" class="tdheight"> 
      <td class="r_q"> 
        Новостройка 
      </td> 
      <td class="r_f">Эта</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n108" class="tdheight"> 
      <td class="r_q"> 
        Новостройка 
      </td> 
      <td class="r_f">Эта</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n34" class="tdheight"> 
      <td class="r_q"> 
        tyr555 
      </td> 
      <td class="r_f">5</td> 
      <td class="r_rc">0</td> 
      <td class="r_sq">0</td> 
      <td class="r_tc">0</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n31" class="tdheight"> 
      <td class="r_q"> 
        1111111111 
      </td> 
      <td class="r_f">7</td> 
      <td class="r_rc">3</td> 
      <td class="r_sq">55</td> 
      <td class="r_tc">21212</td> 
      <!--<td class="r_tcnd">1</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n30" class="tdheight"> 
      <td class="r_q"> 
        vsdvsdv 
      </td> 
      <td class="r_f">5</td> 
      <td class="r_rc">4</td> 
      <td class="r_sq">6</td> 
      <td class="r_tc">3555</td> 
      <!--<td class="r_tcnd">0</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n29" class="tdheight"> 
      <td class="r_q"> 
        vsdvsdv 
      </td> 
      <td class="r_f">5</td> 
      <td class="r_rc">5</td> 
      <td class="r_sq">16</td> 
      <td class="r_tc">32</td> 
      <!--<td class="r_tcnd">0</td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
    <tr data-path="serdtse-stolitsy" id="n" class="tdheight"> 
      <td class="r_q"> 
      </td> 
      <td class="r_f"></td> 
      <td class="r_rc"></td> 
      <td class="r_sq"></td> 
      <td class="r_tc"></td> 
      <!--<td class="r_tcnd"></td>--> 
      <td class="r_renovation rotated_td"> 
        <div class="search_ren_btn search_popup_icon n0"></div> 
      </td> 
      <td class="r_res"> 
        <div class="search_reserve_btn search_popup_icon disabled" data-popup="Бронирование" id="orderModal"></div> 
      </td> 
    </tr> 
  </tbody> 
</table>

как сделать чтобы при клике на класс "r_tc multi" она отсортировалась по ценам от меньшей к большей

Answer 1

Подобное делают на стороне "логики", если у вас PHP, то на нем. Или же Ajax-ом на тот же PHP. Так как у вас с большей вероятностью будет постраничная навигация, то сортировку делают на стороне логики и уже выводят на view.

Вы должны создать событие на классе r_tc multi, который отправляет запрос обработчику, с нужнымы параметрами ASD/DESC + price => сортирует в нужном порядке => возвращает => показываете.

Если нужно чисто на JS и это единственная таблица (без пагинации), то можете воспользоваться к примеру этим плагином: https://github.com/tristen/tablesort (DEMO)