Как сортировать таблицу с ценами в JQuery?

Question

[Никита]

Здравствуйте! Нашел скрипт сортировки таблицы, но он неправильно сортирует числовые значения. Как его исправить, чтобы сортировка по цене была правильная? Как я понимаю надо сначала строку преобразовать в число, но как это сделать в моем коде? Заранее спасибо за помощь!

function sort_price() 
{
 var table=$('#price-table');
 var tbody =$('#price-table-body');

 tbody.find('tr').sort(function(a, b) 
 {
  if($('#price_order').val()=='asc') 
  {
   return $('td:nth-child(7) .td-price', a).text().localeCompare($('td:nth-child(7) .td-price', b).text());
  }
  else 
  {
   return $('td:nth-child(7) .td-price', b).text().localeCompare($('td:nth-child(7) .td-price', a).text());
  }
    
 }).appendTo(tbody);
  
 var sort_order=$('#price_order').val();
 if(sort_order=="asc")
 {
  document.getElementById("price_order").value="desc";
 }
 if(sort_order=="desc")
 {
  document.getElementById("price_order").value="asc";
 }
}

Comments

[Надим]

Сделать сортировку дело не сложное, но от вас нужен пример таблицы с ценами.

[Никита]

Надим Закиров, спасибо за отклик. Таблица имеет такую разметку:

<table class="table" id="price-table">
	<thead>
		<tr>
			<th>Тариф</th>
			<th>Лимит</th>
			<th>Количество</th>
			<th>Оборудование 1</th>
			<th>Оборудование 2</th>
			<th>Скидка</th>
			<th colspan="2">Цена</th>
		</tr>
	</thead>
	<tbody id="price-table-body">
		<tr>
			<td class="td-tariff-name">Старт</td>
			<td><span class="td-limit">100</span>&nbsp;шт/мес.</td>
			<td><span class="td-sum">200</span>&nbsp;шт</td>
			<td>Нет</td>
			<td>Нет</td>
			<td><span class="td-sale-price">500</span>&nbsp;руб./мес.<br><span class="td-sale-text">скидка на 2 мес.</span></td>
			<td><span class="td-price">900</span>&nbsp;руб./мес.</td>
			<td><button class="td-order-btn btn">Подключить</button></td>
		</tr>
		<tr>
			<td class="td-tariff-name">Старт Плюс</td>
			<td><span class="td-limit">150</span>&nbsp;шт/мес.</td>
			<td><span class="td-sum">200</span>&nbsp;шт</td>
			<td>Нет</td>
			<td>Нет</td>
			<td><span class="td-sale-price">700</span>&nbsp;руб./мес.<br><span class="td-sale-text">скидка на 2 мес.</span></td>
			<td><span class="td-price">1200</span>&nbsp;руб./мес.</td>
			<td><button class="td-order-btn btn">Подключить</button></td>
		</tr>
	</tbody>
</table>

Answer 1

[Надим]

Пример сортировки строк таблицы по цене на jQuery от большего к меньшему:

$('table#price-table > tbody > tr').sort(function(a, b) {
    var one = Number($(a).children().eq(6).text().replace(/[^0-9]/g, ''));
    var two = Number($(b).children().eq(6).text().replace(/[^0-9]/g, ''));
    return two - one;
}).each(function(n, tr) {
    $('table#price-table > tbody').append(tr);
});

Если цена будет указана с копейками, работать НЕ будет.

Comments

[Никита]

Благодарю! Доработал код под свою задачу, чтобы была и обратная сортировка:

$('table#price-table > tbody > tr').sort(function(a, b) {
    var one = Number($(a).children().eq(6).text().replace(/[^0-9]/g, ''));
    var two = Number($(b).children().eq(6).text().replace(/[^0-9]/g, ''));
    if($('#price_order').val()=='asc') 
      {
        return two - one;
      } else {
        return one - two;  
      }  
}).each(function(n, tr) {
    $('table#price-table > tbody').append(tr);
});

[Надим]

Никита, да, вы правильно поняли как работает функцию .sort, это главное.