flash12320,
на основе кода от
Malleys
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[data-sort]{
webkit-writing-mode: horizontal-tb !important;
-webkit-appearance: button;
border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
border-style: solid;
border-width: 1px;
padding: 1px 7px 2px;
text-rendering: auto;
color: initial;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 11px system-ui;
}
[data-sort][data-order="-1"]::after {
content: "▼"
}
[data-sort][data-order="1"]::after {
content: "▲"
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$("[data-sort]").click(function () {
var collator = new Intl.Collator(["en", "ru"], {numeric: true}),
rank = this.dataset.sort,
order = (this.dataset.order = -(this.dataset.order || -1));
comparator = (a, b) => order * collator.compare(
a.dataset[rank],
b.dataset[rank]
),
items = $(".item").sort(comparator);
$(".sort-table").append(items);
});
});
</script>
</head>
<body>
Отсортировать по
<span class="srt-name" data-sort="mfo"> имени</span>
<span class="srt-nomer" data-sort="nomer">по числу</span>
<div class="sort-table">
<div class="item" data-mfo="р" data-nomer="100" >100 р</div>
<div class="item" data-mfo="о" data-nomer="30" >30 о</div>
<div class="item" data-mfo="а" data-nomer="200" >200 а</div>
<div class="item" data-mfo="з" data-nomer="1" >1 з</div>
</div>
</body>
</html>