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

Question

[Антон Рейтаровский]

Здравствуйте. Есть у меня таблица на странице в ней около 3-х тысяч значений выглядит это так

|name|price|price|price|price|price
|prod|2000 |3000 |4000 |     |340

Мне нужно получить среднее число из всех price и отсортировать по нему.

У каждой ячейки price есть свой класс, вот функция которая возвращает среднее число

function getAvarage(item) {
    return (getValue(item, '.col1') + getValue(item, '.col2') + getValue(item, '.col3') + getValue(item,'.col4') + getValue(item, '.col5')) / 5;
}

function getValue(item, selector) {
    var value = parseInt($(item).children(selector).children().text());
    return value == true ?  parseInt($(item).children(selector).children().text()) : 0;
}

Дальше идет сортировка, я пробовал два метода но скорость слишком маленькая.

function sort(items) {
        var isSort = true;
        while (isSort) {
            isSort = false;
            for (i = 1; i < items.length; i++) {
                var firstValue = getAvarage(items[i - 1]);
                var secondValue = getAvarage(items[i]);
                if (firstValue < secondValue) {
                    var swap = items[i - 1];
                    items[i - 1] = items[i];
                    items[i] = swap;
                    isSort = true;
                }
            }
        }
        return items;
}


function QuickSort(A)  {
        if (A.length == 0) return [];
        var a = [], b = [], p = A[0];
        for (var i = 1; i < A.length; i++)
        { if (getAvarage(A[ i ]) > getAvarage(p)) a[a.length] = A[ i ];
        else b[b.length] = A[ i ];
        }
        return QuickSort(a).concat( p,QuickSort(b) );
    }

Как можно быстро отсортировать это?

Answer 1

[jaxel]

таблица на странице в ней около 3-х тысяч значений

Может лучше сделать это на серверной стороне? Посчитать через SQL и вывод сделать с пагинацией?

Comments

[Антон Рейтаровский]

На сервере сортируется, но пользователь может изменять данные на клиенте и нужно их сортировать, пагинация не подходит.

Answer 2

[Алексей Немиро]

Узкое место тут в первую очередь jQuery. Нужно уменьшить число запросов к элементам через jQuery. А то получается, что у вас при сортировки для каждой итерации происходит маленький ад :-)

Возможно, если вы сделаете сортировку, сформируете новый набор данных и затем замените им старые данные, работать будет быстрее.

Вот небольшой пример: https://jsfiddle.net/alekseynemiro/q3tsw3bt/1/

var data = [];

// получаем данные из таблицы в массив
$('tr', 'table>tbody').each(function(index, row) {
  var cells = $('td', row);
  var sum = 0;
  var items = [];

  for (var i = 0; i < cells.length; i++)
  {
    if (i == cells.length - 1)
    {
      cells[i].innerHTML = sum / 5;
      items.push(sum / 5);
    }
    else
    {
      sum += parseInt(cells[i].innerHTML, 10);
      items.push(parseInt(cells[i].innerHTML, 10));
    }
  }

  data.push(items);
});

// сортируем массив
data.sort(function (a, b) {
  return a[5] - b[5];
});

// создаем новую таблицу на основе массива
var html = '<table><thead><tr>';
html += '<th>price</th><th>price</th><th>price</th>';
html += '<th>price</th><th>price</th><th>avrg</th></tr></thead>';
html += '<tbody>';

for (var i = 0; i < data.length; i++)
{
  html += '<tr>';

  for (var j = 0; j < data[i].length; j++)
  {
    html += '<td>' + data[i][j] + '</td>';
  }

  html += '</tr>';
}

html += '</tbody></table>';

// выводим таблицу (перезаписываем старую)
$('#content').html(html);

Набросал еще вариант со счетчиком и с 50 000 строками, но счетчик показывает неправильное время, видимо на отрисовку данных в браузере уходит больше времени.