быстрые манипуляции со строками таблицы

Question

[Imbolc]

Есть таблица на 5к строк. И необходимость скрывать/показывать выборки из 1к её строк. Обычный вариант $(#table .need_hide).hide() работает очень долго. Минуты в зависимости от браузера. Есть варианты сделать-таки это средствами js или переносить на сервер только?

Comments

[ertaquo]

А как осуществляется выборка?

[Imbolc]

Дык, я ж показал, просто по классу.

[Алксандр Коротаев]

html в студию…

Answer 1

[anatoly_rr]

Очень здорово помогает такой приём: прописывать класс только одному, родительскому элементу и задавать видимость в css:

<style>
#sometable.do_hide .need_hide { display: none; }
</style>

...

$('#sometable').addClass('do_hide');


Comments

[Imbolc]

Попробовал, действительно _значительно_ быстрее. В хроме почти мгновенно. Но FF всё же тратит около полминуты.

[Алксандр Коротаев]

Отключи FireBugs, быстрее всё равно не будет…

Answer 2

[Алксандр Коротаев]

Если надо именно на JS — cамое быстрое отказаться от абстракций.

  var trs  = document.getElementById("table").getElementsByTagName("tr");
  for (var i=0; i<trs.length;i++){
    var tr = trs[i];
    if (tr.hasAttribute("class") && tr.getAttribute("class") == "need_hide"){
       tr.setAttribute("style", "display: none");
    }
  }

Comments

[Алксандр Коротаев]

Для того кто минусанул: jsperf.com/table-class-hide-vs-dom

Answer 3

[rudykh]

Вы уверены, что вам действительно нужны 5 тысяч строк данных на одной странице? Я бы разбивал данные на стороне сервера на страницы строк по 50, например. А для поиска нужных данных — сортировка по различным колонкам + операция фильтрации + кнопочка Hide.

Comments

[Imbolc]

Да, уверен.

Answer 4

[B@rmaley.e><e]

Попробуйте скрыть таблицу (необязательно через display:none, лучше через visibility:hidden), потом скрыть все строки, а потом снова показать таблицу.
Советую почитать: webo.in/articles/all/2009/31-rending-restyle-reflow-relayout/

Comments

[B@rmaley.e><e]

Если visibility:hidden не поможет, попробуйте display:none.

[Imbolc]

Попробовал такое (если правильно вас понял):

        $('#table').hide()
        $(#table .need_hide).hide()
        $('#table').show()

Заметного изменения скорости не принесло.

Answer 5

[Павел Некрасов]

На сервер такое тоже не перенесешь, статический грид 5K будет грузится очень долго, я предлагаю вам попробывать не использовать table впринципе, а перейти на ul li, браузеры работают со списками гораздо быстрее, даже IE7, сам правда пробывал на тысячи записей, грид на js заполнялся очень долго, не говоря уж об IE который всю винду подвешивал. А вот со списками все гораздо веселее выглядело! плюс к этому совет от и я думаю будет побыстрее… строку внутри li элумента делайте inline элкментами, например span они быстрее div

Comments

[Павел Некрасов]

парсер съел тег «совет от anatoly_rr»

Answer 6

[JeanLouis]

Создайте 5 таблиц по 1к и скрывайте сами таблицы.

Comments

[Imbolc]

Не подходит, данные должные быть в одной таблице.

[Arsen]

а если оставить данные в одной таблице но разбить их внутри по tbody — которые в свою очередь скрывать и показывать?

Answer 7

[aaaDron]

есть плагин для jquery www.trirand.com/blog/jqgrid/jqgrid.html (Advanced -> Search Big Sets) какраз для работы с большими таблицами

Comments

[Алксандр Коротаев]

там отображается по 12 записей. Остальные сидят в памяти…

Answer 8

[Rodion Gashe]

Клиент не предназначен для обработки такого количества информации.
Если у кого-то комп не такой мощный как у вас будет или попутно запустят ещё пару весовых приложений — скорость ещё ниже будет.

Можете попробовать работать с загруженными данными в JSON, а не с таблицей, а саму таблицу генерить на ходу и вставлять в необходимое место — это будет ещё быстрее.