Простой / быстрый способ показать / скрыть строки очень большой таблицы с помощью Javascript?

Question

Вот что я пытаюсь сделать.У меня очень большой список предметов.Допустим, это около 130 000 предметов.Каждый элемент представляет собой строку, что-то вроде «миндального антикварного лазурного зеленого огненного кирпича».

Прямо сейчас я просто помещаю каждый элемент как отдельную ячейку в один ряд таблицы.Было бы неплохо отображать только элементы, начинающиеся с a или начинающиеся с b и т. Д.У меня есть несколько проблем с js, которые я пишу, чтобы сделать это, но самая большая из них - скорость - выполнение НИЧЕГО на столе, состоящем из такого количества элементов, действительно медленное.Есть ли лучший способ решения этой проблемы?

Если ответ отрицательный, то все в порядке - это дополнительное кредитное присвоение для класса баз данных, и этот компонент предназначен для создания отчетов.Этот конкретный набор данных поступил из таблицы БД с 6 миллионами элементов, так что на самом деле ничего нельзя сделать, чтобы уменьшить размер.

РЕДАКТИРОВАТЬ: Вот еще немного информации о проблеме.Я создаю эту HTML-страницу через программу на C #.Программа использует LINQ2SQL для запроса этой массивной базы данных, получает результаты и выводит их в файл HTML.Это не будет веб-сайт, никакие данные не будут поступать с сервера;это статическая HTML-страница, которую можно просмотреть в браузере.Я мог бы реализовать это как csv, если бы захотел, но я думаю, что он выглядит лучше, как заархивированный HTML-файл.

Тип данных, которые я загружаю, таков: «Для каждого региона найдитевсе продукты, которые не были проданы в первой половине 1993 года ".Таким образом, с около 200 000 товаров в каждом регионе продается всего около 70 тыс.Это означает, что существует 130 тысяч непроданных продуктов, и мы должны перечислить их все для каждого региона.У меня есть отдельный HTML-файл для каждого региона, но я не могу придумать, как еще уменьшить данные.

Дальнейшее редактирование: Спасибо всем за предложения.Короткий ответ на этот вопрос, я думаю, «нет; это будет медленно».Как сказал один из комментаторов, списки из более 100 тыс. Элементов не входят в HTML-документы.В любом случае, я делал все возможное, выходя за рамки моей домашней работы, поэтому я просто позволю ей отдохнуть.

Answer 1

Неважно, что будет медленно, извините. Если вы не используете свой веб-браузер на Blade-сервере или чем-то еще; -)

Однако есть одна хитрость, которая законно ускорит процесс: вместо того, чтобы устанавливать для свойства display строк значение «none», установите для их класса значение «nodisplay» и определите правило css:

.nodisplay { display:none }

Теперь вы можете подумать, в чем разница, но на самом деле (как PPK quirksmode.org однажды доказал с помощью тестов производительности) браузеры быстрее переключают классы с соответствующими изменениями стиля, чем при прямом изменении стиля элементов.

Не могу сказать, что это приведет к изменению вашего безумно огромного стола быстро , но это должно сделать его быстрее .

Answer 2

Если бы вы могли отображать описательные классы на стороне сервера <tr> s и / или <td> s, то вы могли бы просто изменить класс родительской таблицы, и браузер позаботился бы о повторной визуализации таблицы. после соответствующего CSS.

table.just_a td,
table.just_bipeds td {
    display:none;
}

table.just_a td.a,
table.just_bidpeds td.biped {
    display:inherit;
}

<table class="" id="theTable">
  <tr>
    <td class="a quadraped">Anteater</td>
  </tr>
  <tr>
    <td class="z quadraped">Zebra</td>
  </tr>
  <tr>
    <td class="h biped">Human</td>
  </tr>
</table>
<input type="button" onclick="document.getElementById('thTable').className='just_a'" value="Just A" />

Answer 3

Придерживайтесь csv, элементы списка 130k не принадлежат html-странице.

Answer 4

Я ненавижу домашнюю работу, которая не имеет никакого смысла!Правильный ответ: это неправильный способ сделать это.Вы никогда не должны пытаться отображать 100K + (или даже 10K ..) элементов на одной HTML-странице.Но если вопрос заключается в том, «как лучше сделать что-то не так», я бы сделал следующее, чтобы разбить его до приемлемого размера для отображения, сохраняя при этом все на одной клиентской странице

1)Отображать данные не как HTML, а как массив Javascript, отсортированный по алфавиту

2) Создать простое меню в HTML / javascript, которое позволит пользователю выбрать только первую букву

3) Снова использовать JSвизуализировать таблицу, используя данные из массива, который вы создали ранее.Чтобы избежать трудоемких выборок из этого массива, вы могли бы хранить отдельный индекс первого элемента для каждой буквы алфавита.

Массив JS с элементами по 100 КБ все еще будет заметно медленным, я думаю,, но, вероятно, намного медленнее, чем попытка отрисовки всего сразу.

Вы можете в дальнейшем использовать что-то для создания подкачки, если вы этого хотите, просто используя все данные из вашего массива.

Answer 5

Ключом к эффективности при вставке большого количества данных на сайт является уменьшение количества обновлений страницы. Это можно сделать, попытавшись добавить все данные одновременно, объединяя все html в строку и вставляя только один раз.

Например:

var html = "<table>";

for (var i = 0; i < listOfData.length; i++)
{
  html += "<tr><td>" + listOfData[i] + "</td></tr>";
}
html += "</table>";

// Insert it
$("body").html(html);

Надеюсь, это поможет!