Сортировка по двум колонкам в таблице

116

28 сентября 2019, 01:40

Подскажите как можно реализовать такую сортировку. Нет ни каких идей.. "Результаты в уже созданной HTML таблице отсортировать в порядке убывания звездности, для одинаковых звезд упорядочивание производить по названию отеля по возрастанию". Пока есть сортировка только по одному полю.

Вот мой код gsp странички Grails.

var table = $('#mytable'); 
var tbody = $('#table1'); 
 
function sort_rait() { 
 
 
  tbody.find('tr').sort(function(a, b) { 
    if ($('#rait_order').val() == 'desc') { 
      return $('td:first', a).text().localeCompare($('td:first', b).text()); 
 
    } else { 
      return $('td:first', b).text().localeCompare($('td:first', a).text()); 
 
    } 
  }).appendTo(tbody); 
 
  var sort_order = $('#rait_order').val(); 
 
  if (sort_order == "asc") { 
    document.getElementById("rait_order").value = "desc"; 
  } 
} 
 
 
window.addEventListener('load', sort_rait)

.title { 
  margin: 1em 0; 
  padding: .3em .5em; 
  text-align: right; 
  background-color: seashell; 
} 
 
button { 
  font-weight: 700; 
  color: white; 
  border-radius: 3px; 
  background: #aac078; 
  margin-left: 10px; 
  margin-top: 10px; 
  margin-bottom: 10px; 
  outline: none; 
} 
 
table { 
  width: 100%; 
  border-collapse: collapse; 
} 
 
td, 
thead { 
  padding: 3px; 
  border: 2px solid #aac078; 
  text-align: center; 
  vertical-align: middle; 
} 
 
thead { 
  background: whitesmoke; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="body"> 
  <div id="header"> 
    <form action="/test/"> 
      <button type="submit">Новый поиск</button> 
    </form> 
  </div> 
  <g:set var="haveQuery" value="${params.q?.trim()}" /> 
  <g:set var="haveResults" value="${searchResult?.results}" /> 
  <g:if test="${haveResults}"> 
    <div class="list"> 
      <table id="mytable"> 
        <thead> 
          <tr> 
            <td><strong>Звёздность</strong></td> 
            <td><strong>Название</strong></td> 
            <td><strong>Страна</strong></td> 
          </tr> 
        </thead> 
        <tbody id="table1"> 
          <g:set var="totalPages" value="${Math.ceil(searchResult.total / searchResult.max)}" /> 
          <g:each in="${searchResult.results}" status="i" var="htls"> 
            <g:if test="${htls.site}"> 
              <tr> 
                <td>${htls.rating}</td> 
                <td>${htls.name}<br><a href="${htls.site}" target="_blank" style="font-size: small">Перейти на сайт</a></td> 
                <td>${htls.country}</td> 
              </tr> 
            </g:if> 
            <g:else> 
              <tr> 
                <td>${htls.rating}</td> 
                <td>${htls.name}</td> 
                <td>${htls.country}</td> 
              </tr> 
            </g:else> 
          </g:each> 
        </tbody> 
      </table> 
    </div> 
    <div class="paginateButtons"> 
      <g:paginate params="[q: params.q]" total="${searchResult.total}" /> 
    </div> 
  </g:if> 
  <br/> 
  <div class="title"> 
    <span> 
        <g:if test="${haveQuery && haveResults}"> 
            Количество найденных отелей: <strong>${searchResult.total}</strong> 
        </g:if> 
        <g:else> 
            <p style="text-align: center"> Пустой запрос </p> 
        </g:else> 
        <g:if test="${haveQuery && !haveResults && !parseException}"> 
            <p style="text-align: center"> По Вашему запросу ничего не найдено </p> 
        </g:if> 
    </span> 
  </div> 
  <br/> 
</div>

Answer 1

По второму полю можно сортировать так же как и по первому, только с равнивать не a c b, а b c a

var table = $('#mytable'); 
var tbody = $('#table1'); 
 
function sortRait() { 
  var sortOrder = $('#rait_order').val(); 
  $("#rait_order").val(sortOrder == "asc" ? "desc" : "asc"); 
  tbody.find('tr').sort(function(a, b) { 
    var tdA = $(a).find('td'); 
    var tdB = $(b).find('td'); 
    if (sortOrder == 'desc') { 
      return tdA.eq(0).text().localeCompare(tdB.eq(0).text()) || 
        tdB.eq(1).text().localeCompare(tdA.eq(1).text()); 
    } else { 
      return tdB.eq(0).text().localeCompare(tdA.eq(0).text()) || 
        tdA.eq(1).text().localeCompare(tdB.eq(1).text()); 
 
    } 
  }).appendTo(tbody); 
} 
 
$('.sorting').on('click', sortRait); 
 
$(window).on('load', sortRait);

.title { 
  margin: 1em 0; 
  padding: .3em .5em; 
  text-align: right; 
  background-color: seashell; 
} 
 
button { 
  font-weight: 700; 
  color: white; 
  border-radius: 3px; 
  background: #aac078; 
  margin-left: 10px; 
  margin-top: 10px; 
  margin-bottom: 10px; 
  outline: none; 
} 
 
table { 
  width: 100%; 
  border-collapse: collapse; 
} 
 
td, 
thead { 
  padding: 3px; 
  border: 2px solid #aac078; 
  text-align: center; 
  vertical-align: middle; 
} 
 
thead { 
  background: whitesmoke; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="body"> 
  <div id="header"> 
    <form action="/test/"> 
      <button type="submit">Новый поиск</button> 
    </form> 
  </div> 
  <div class="list"> 
    <table id="mytable"> 
      <thead> 
        <tr> 
          <td><strong>Звёздность</strong></td> 
          <td><strong>Название</strong></td> 
          <td><strong>Страна</strong></td> 
        </tr> 
      </thead> 
      <tbody id="table1"> 
        <tr> 
          <td>3</td> 
          <td>Отель3</td> 
          <td>Страна3</td> 
        </tr> 
        <tr> 
          <td>3</td> 
          <td>Отель2</td> 
          <td>Страна2</td> 
        </tr> 
        <tr> 
          <td>3</td> 
          <td>Отель1</td> 
          <td>Страна1</td> 
        </tr> 
        <tr> 
          <td>4</td> 
          <td>Отель3</td> 
          <td>Страна3</td> 
        </tr> 
        <tr> 
          <td>4</td> 
          <td>Отель2</td> 
          <td>Страна2</td> 
        </tr> 
        <tr> 
          <td>5</td> 
          <td>Отель1</td> 
          <td>Страна1</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</div> 
<button class="sorting">Сортировать</button> 
<input id="rait_order" type="hidden" value="asc" />