Форум

flash12320 · #1 (**permalink**) 18.09.2020, 17:41

Добрый вечер, есть скрипт, который хорошо сортирует данные в виде текста, но числовые данные сортирует не правильно.
Как исправить код, подскажите?

<span class="srt-name">Отсортировать по имени</span>
<span class="srt-nomer">по числу</span>

<div class="sort-table">
   <div class="item" data-name-mfo="р"  data-nomer="100" >100</div>
   <div class="item" data-name-mfo="о"  data-nomer="30" >30</div>
   <div class="item" data-name-mfo="а"  data-nomer="200" >200</div>
   <div class="item" data-name-mfo="з"  data-nomer="1" >1</div>
</div>

$(".srt-name").click(function () {
    var t = $(".item"),
        e = $(".sort-table");
    t.sort(function (t, e) {
        return t.getAttribute("data-name-mfo").localeCompare(e.getAttribute("data-name-mfo"));
    }),
        t.detach().appendTo(e);
});

$(".srt-nomer").click(function () {
    var t = $(".item"),
        e = $(".sort-table");
    t.sort(function (t, e) {
        return t.getAttribute("data-nomer").localeCompare(e.getAttribute("data-nomer"));
    }),
        t.detach().appendTo(e);
});

Nexus · #2 (**permalink**) 18.09.2020, 17:54

Замените

return t.getAttribute("data-nomer").localeCompare(e.getAttribute("data-nomer"));

на

return t.getAttribute("data-nomer") - e.getAttribute("data-nomer");

flash12320 · #3 (**permalink**) 18.09.2020, 18:22

Спасибо, помогло

рони · #4 (**permalink**) 18.09.2020, 18:31

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>

flash12320 · #5 (**permalink**) 18.09.2020, 19:13

рони,
Отлично!

Форум

Справочник

Discord чат

Курсы javascript