Форум

Hyacinth · #1 (**permalink**) 18.01.2023, 21:32

Приветствую уважаемых форумчан!

Требуется доработка кода сортировки таблицы для работы в старом 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 для связи

Aetae · #2 (**permalink**) 18.01.2023, 21:49

"Старом IE" это каком? 11? 8? ... 6?)

рони · #3 (**permalink**) 18.01.2023, 22:14

Сообщение от Hyacinth

сортировки таблицы для работы в старом IE

https://javascript.ru/forum/dom-wind...tml#post477075

Aetae · #4 (**permalink**) 18.01.2023, 22:32

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

рони · #5 (**permalink**) 18.01.2023, 22:53

Aetae,
может, хватит того алгоритма, что предложен в примере?)))

voraa · #6 (**permalink**) 19.01.2023, 07:38

Сообщение от Aetae

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

там { numeric: true }. Обычное числовое сравнение.

Aetae · #7 (**permalink**) 19.01.2023, 21:14

voraa, не обычное и не только числовое:

collator = new Intl.Collator(["en", "ru"], { numeric: true });
array = [4, 1, 11, 'слово4', 'слово1', 'слово11', 'Вася'];
alert(array.sort() + '\n' + array.sort(collator.compare));

dvbshka · #8 (**permalink**) 19.01.2023, 21:35

Может быть глупость, но в старых версиях 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

<!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>

Форум

Справочник

Discord чат

Курсы javascript