Ускороить сотрировку таблицы

137
18 апреля 2019, 02:20

Есть функция сотрировки, и так как записай более 500 она работает очень медленно. Как можно ускорить этот процесс или что я делаю не так?

function sortTable(n) {
    var table, rows, switching, shouldSwitch, direction;
    var switchCount = 0;
    switching = true;
    direction = "asc";
    var headers = document.getElementsByTagName('th');
    for (var i = 0; i < headers.length; i++) {
        headers[i].classList.remove('contacts__table-sortable_asc', 'contacts__table-sortable_desc');
    }
    while (switching) {
        headers[n].classList.add('contacts__table-sortable_' + direction);
        switching = false;
        rows = $('.contacts__table-row');
        for (var i = isEditing ? 1 : 0; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            var x = rows[i].getElementsByTagName("TD")[n];
            var y = rows[i + 1].getElementsByTagName("TD")[n];
            if (direction === "asc") {
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            } else if (direction === "desc") {
                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchCount++;
        } else {
            if (switchCount === 0 && direction === "asc") {
                direction = "desc";
                switching = true;
            }
        }
    }
}

Сама таблица

    <table id="table" class="contacts__table" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th><input onchange="selectAllRows(this)" class="contacts__table-checkbox" type="checkbox"></th>
            <th class="contacts__table-sortable contacts__table-sortable_narrow" onclick="sortTable(1)">Title</th>
            <th class="contacts__table-sortable contacts__table-sortable_narrow" onclick="sortTable(2)">Name</th>
            <th class="contacts__table-sortable contacts__table-sortable_narrow" onclick="sortTable(3)">Surname</th>
            <th class="contacts__table-sortable" onclick="sortTable(4)">Email</th>
            <th>Note</th>
            <th class="contacts__table-sortable" onclick="sortTable(6)">Tags</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <?php foreach ($contacts as $contact) { ?>
            <tr id="tr<?php echo $contact->id ?>" onclick="toggleRowSelected(this)" class="contacts__table-row">
                <td><input class="contacts__table-checkbox" type="checkbox"></td>
                <td><?php echo $contact->title ?></td>
                <td><?php echo $contact->name ?></td>
                <td><?php echo $contact->surname ?></td>
                <td class="contacts__table-email"><span class="table-overflow"><?php echo $contact->email ?></span></td>
                <td><span class="table-overflow"><?php echo $contact->note ?></span></td>
                <td><span class="table-overflow"><?php echo $contact->tags ?></span></td>
                <td><label onclick="editContact('tr<?php echo $contact->id ?>')" class="contacts__table-btn contacts__table-btn_edit"></label></td>
            </tr>
        <?php } ?>
        </tbody>
    </table>
Answer 1

Проблема не в сортировке, а в отрисовке. 500 строк в таблице рендерится медленно. Нужно воспользоваться библиотеками типа window-rendering, т.е. рендерить только то, что влезает в экран просмотра. И вообще сортировать нужно данные, а не узлы таблицы и потом стирать и заново отрисовывать таблицу уже по отсортированных данных

READ ALSO
Получение информации с html страницы

Получение информации с html страницы

Есть страница, с таблицей из дивов, куда добавляются ордера пользователей из БД, мне нужно эти ордера экспортировать в csv таблицу, как это...

102
Изменение цвета объекта на изображении [закрыт]

Изменение цвета объекта на изображении [закрыт]

Например у меня есть изображение

180
Можно ли в JS вывести содержимое папки?

Можно ли в JS вывести содержимое папки?

Задача: создать некий FolderViewerМорда такая:

110
Загрузить контент страницы через Ajax

Загрузить контент страницы через Ajax

Мне нужно загрузить статью на сайт с помощью Ajax, в инете есть следующий пример: Создадим 3 файлаindex

138