Как отсортировать 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); }); |
Замените
return t.getAttribute("data-nomer").localeCompare(e.getAttribute("data-nomer")); на return t.getAttribute("data-nomer") - e.getAttribute("data-nomer"); |
Спасибо, помогло
|
сортировка 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> |
рони,
Отлично! |
Часовой пояс GMT +3, время: 18:48. |