Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2020, 18:41
Аватар для flash12320
Новичок на форуме
Отправить личное сообщение для flash12320 Посмотреть профиль Найти все сообщения от flash12320
 
Регистрация: 18.09.2020
Сообщений: 6

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

<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);
});
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2020, 18:54
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,424

Замените
return t.getAttribute("data-nomer").localeCompare(e.getAttribute("data-nomer"));

на
return t.getAttribute("data-nomer") - e.getAttribute("data-nomer");
Ответить с цитированием
  #3 (permalink)  
Старый 18.09.2020, 19:22
Аватар для flash12320
Новичок на форуме
Отправить личное сообщение для flash12320 Посмотреть профиль Найти все сообщения от flash12320
 
Регистрация: 18.09.2020
Сообщений: 6

Спасибо, помогло
Ответить с цитированием
  #4 (permalink)  
Старый 18.09.2020, 19:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,569

сортировка div по дата-атрибутам
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>
Ответить с цитированием
  #5 (permalink)  
Старый 18.09.2020, 20:13
Аватар для flash12320
Новичок на форуме
Отправить личное сообщение для flash12320 Посмотреть профиль Найти все сообщения от flash12320
 
Регистрация: 18.09.2020
Сообщений: 6

рони,
Отлично!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать margin, у кучи div pokk (X)HTML/CSS 2 21.09.2018 12:13
Как обновить содержимое div (или какую функцию вызвать)? unity555 Events/DOM/Window 3 19.12.2017 16:38
Как создать div на чужом сайте? liz2887yoko Элементы интерфейса 0 29.10.2017 03:09
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
как передать ссылку в div hurricane AJAX и COMET 4 15.01.2011 15:24