Javascript.RU

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

Требуется доработка кода сортировки таблицы для работы в старом IE
Приветствую уважаемых форумчан!

Требуется доработка кода сортировки таблицы для работы в старом IE, а именно:
<script type="text/javascript">
'use strict';
const theads = document.querySelectorAll(".table_sort thead");
theads.forEach(thead => thead.addEventListener("click", evt => getSort(evt)));

function getSort({ target }) {
const order = target.dataset.order = -(target.dataset.order || -1);
const thList = Array.from(target.parentNode.cells);
const index = thList.indexOf(target);
const collator = new Intl.Collator(["en", "ru"], { numeric: true });
const comparator = (index, order) => (a, b) => {
return (
  order * 
  collator.compare(a.children[index].textContent, b.children[index].textContent));
};
const tablesBodies = Array.from(target.closest("table").tBodies);
tablesBodies.forEach(tBody => {
tBody.append(...Array.from(tBody.rows).sort(comparator(index, order)));
});
thList.forEach(th => th.classList.toggle("sorted", th === target));
}
</script>


Пример кода таблицы:

<table style="width:99%" class="table_sort">
<thead>
<tr><th>Name</th><th>count1</th><th>count2</th></tr>
</thead>
<tbody>
<tr class="bc"><td>jacques</td><td><b>12</b></td><td>1</td></tr><tr class="bc"><td>mkishimoto</td><td><b>4</b></td><td>5</td></tr><tr class="bc"><td>info</td><td><b>0</b></td><td>2</td></tr><tr class="bc"><td>monika</td><td><b>0</b></td><td>2</td></tr><tr class="bc"><td>sales</td><td><b>0</b></td><td>2</td></tr><tr class="bc"><td>alex</td><td><b>5</b></td><td>0</td></tr><tr class="bc"><td>monika</td><td><b>0</b></td><td>1</td></tr><tr class="bc"><td>bailey</td><td><b>0</b></td><td>1</td></tr><tr class="bc"><td>bansi.v</td><td><b>0</b></td><td>1</td></tr><tr class="bc"><td>dstrupiechowski</td><td><b>2</b></td><td>1</td></tr><tr class="bc"><td>alexx</td><td><b>1</b></td><td>0</td></tr>
</tbody>
</table>


Оплата за выполнение: 50$
PM для связи

Последний раз редактировалось Hyacinth, 18.01.2023 в 21:35.
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2023, 21:49
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

"Старом IE" это каком? 11? 8? ... 6?)
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2023, 22:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Hyacinth
сортировки таблицы для работы в старом IE
https://javascript.ru/forum/dom-wind...tml#post477075
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2023, 22:32
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

рони, тут используется Intl.Collator, в данном случае нужен alphanumeric sort алгоритм какой-нить.)
__________________
29375, 35

Последний раз редактировалось Aetae, 19.01.2023 в 03:24.
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2023, 22:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Aetae,
может, хватит того алгоритма, что предложен в примере?)))
Ответить с цитированием
  #6 (permalink)  
Старый 19.01.2023, 07:38
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от Aetae
тут используется Intl.Collator, в данном случае нужен alphanumeric sort алгоритм какой-нить.)
там { numeric: true }. Обычное числовое сравнение.
Ответить с цитированием
  #7 (permalink)  
Старый 19.01.2023, 21:14
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

voraa, не обычное и не только числовое:
collator = new Intl.Collator(["en", "ru"], { numeric: true });
array = [4, 1, 11, 'слово4', 'слово1', 'слово11', 'Вася'];
alert(array.sort() + '\n' + array.sort(collator.compare));
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 19.01.2023, 21:35
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

Может быть глупость, но в старых версиях IE работает)

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.rawgit.com/Mottie/tablesorter/v2.29.5/js/jquery.tablesorter.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Mottie/tablesorter/v2.29.5/css/theme.blue.css">
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
    <th>Name</th>
    <th>count1</th>
    <th>count2</th>
</tr>
</thead>
<tbody>
<tr>
    <td>jacques</td>
    <td>12</td>
    <td>1</td>
</tr>
<tr>
    <td>mkishimoto</td>
    <td>4</td>
    <td>5</td>
</tr>
<tr>
    <td>info</td>
    <td>0</td>
    <td>2</td>
</tr>
<tr>
    <td>monika</td>
    <td>0</td>
    <td>2</td>
</tr>
<tr>
    <td>sales</td>
    <td>0</td>
    <td>2</td>
</tr>
<tr>
    <td>alex</td>
    <td>5</td>
    <td>0</td>
</tr>
<tr>
    <td>monika</td>
    <td>0</td>
    <td>1</td>
</tr>
<tr>
    <td>bailey</td>
    <td>0</td>
    <td>1</td>
</tr>
<tr>
    <td>bansi.v</td>
    <td>0</td>
    <td>1</td>
</tr>
<tr>
    <td>dstrupiechowski</td>
    <td>2</td>
    <td>1</td>
</tr>
<tr>
    <td>alexx</td>
    <td>1</td>
    <td>0</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
  $("#myTable").tablesorter();
});
</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 19.01.2023, 22:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

sort table for ie

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        table {
            border-collapse: collapse;
            margin: 20px auto;
        }

        td,
        th {
            border: 1px solid #ddd;
            padding: 5px;
        }

        th {
            cursor: default;
            padding: 6px;
            background: #eee;
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            function example(a, b) {
                if (a == +a && b == +b) return a - b;
                if (a == +a) return -1;
                if (b == +b) return 1;
                a = a.toString().match(/\d+|\D+/g);
                b = b.toString().match(/\d+|\D+/g);
                var length = Math.min(a.length, b.length);
                for (var i = 0; i < length; i++) {
                    if (a[i] == +a[i] && b[i] == +b[i]) return a[i] - b[i];
                    if (a[i] == +a[i]) return -1;
                    if (b[i] == +b[i]) return 1;
                    if (b[i] > a[i]) return -1;
                    if (b[i] < a[i]) return 1;
                }
                return 0;
            }
            var tables = [].slice.call(document.querySelectorAll(".table_sort"), 0);
            tables.forEach(function(tbl) {
                var tbody = tbl.querySelector("tbody"),
                    th = [].slice.call(tbl.querySelectorAll("th"), 0),
                    tr = [].slice.call(tbody.querySelectorAll("tr"), 0),
                    td = [].slice.call(tbody.querySelectorAll("td"), 0),
                    obj = {};
                tbl.querySelector("tr:first-child").addEventListener("click", function(e) {
                    e = e.target || e.srcElement;
                    if ("TH" == e.tagName) {
                        e = th.indexOf(e);
                        e = obj[e] || (obj[e] = td.filter(function(a, i) {
                            return i == e && (e += th.length);
                        }).map(function(a, i) {
                            return [i, a.textContent];
                        }).sort(function(a, b) {
                            a = a[1];
                            b = b[1];
                            return example(a, b);
                        }));
                        var f = document.createDocumentFragment();
                        e.reverse().forEach(function(a, i) {
                            f.appendChild(tr[a[0]]);
                        });
                        tbody.appendChild(f);
                    }
                });
            });
        });
    </script>
</head>

<body>
    <table style="width:99%" class="table_sort">
        <thead>
            <tr>
                <th>Name</th>
                <th>count1</th>
                <th>count2</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bc">
                <td>jacques</td>
                <td><b>12</b></td>
                <td>1</td>
            </tr>
            <tr class="bc">
                <td>mkishimoto</td>
                <td><b>4</b></td>
                <td>5</td>
            </tr>
            <tr class="bc">
                <td>info</td>
                <td><b>0</b></td>
                <td>2</td>
            </tr>
            <tr class="bc">
                <td>monika</td>
                <td><b>0</b></td>
                <td>2</td>
            </tr>
            <tr class="bc">
                <td>sales</td>
                <td><b>0</b></td>
                <td>2</td>
            </tr>
            <tr class="bc">
                <td>alex</td>
                <td><b>5</b></td>
                <td>0</td>
            </tr>
            <tr class="bc">
                <td>monika</td>
                <td><b>0</b></td>
                <td>1</td>
            </tr>
            <tr class="bc">
                <td>bailey</td>
                <td><b>0</b></td>
                <td>1</td>
            </tr>
            <tr class="bc">
                <td>bansi.v</td>
                <td><b>0</b></td>
                <td>1</td>
            </tr>
            <tr class="bc">
                <td>dstrupiechowski</td>
                <td><b>2</b></td>
                <td>1</td>
            </tr>
            <tr class="bc">
                <td>alexx</td>
                <td><b>1</b></td>
                <td>0</td>
            </tr>
        </tbody>
    </table>
    <table class="table_sort">
        <thead>
            <tr>
                <th>Title 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>11</td>
            </tr>
            <tr>
                <td>слово4</td>
            </tr>
            <tr>
                <td>слово1</td>
            </tr>
            <tr>
                <td>слово11</td>
            </tr>
            <tr>
                <td>Вася</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
IE8 и баг с display:none для td (ячейки таблицы) SegaMega Events/DOM/Window 1 21.09.2012 06:56
Легки фреймворки для работы с SVG general Events/DOM/Window 0 26.11.2011 20:06
Ищу библиотеки для работы с 3D Бобр Общие вопросы Javascript 3 06.08.2010 17:02
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31