it-roy-ru.com

Быстрый способ динамически заполнять таблицу данными из JSON в JavaScript

Я экспериментирую с jQuery, JSON и т.д. И наткнулся на следующую задачу. У меня есть скрипт загрузчика на сервере, который возвращает данные таблицы в формате JSON. Когда я получил данные JSON, я хочу заполнить ими таблицу. В настоящее время я использую код, подобный следующему (есть больше столбцов и более продвинутая обработка, но вы поняли):

...
for (var key=0, size=data.length; key<size;key++) {

  $('<tr>')
            .append( $('<td>').html(
                data[key][0]
            ) )
            .append( $('<td>').addClass('whatever1').html(
                data[key][1]
            ) )
            .append( $('<td>').addClass('whatever2').html(
                data[key][2]
            ) )
            .appendTo('#dataTable');
}
...

<table id="#dataTable"></table>
...

Это работает в значительной степени хорошо. Но как только данные растут, они становятся ужасно медленными. Для небольшого количества записей требуется около 5 секунд (Firefox, IE), чтобы построить таблицу, и это немного медленно. Если я, например, создать весь HTML-код на сервере и отправить его в виде строки, которую я включил в таблицу, это будет довольно быстро.

Итак, есть ли более быстрый способ заполнить таблицу?

ПРИМЕЧАНИЕ: Я знаю, что такое пейджинг, и в конце я буду использовать его, поэтому, пожалуйста, не говорите: «Зачем вам такая большая таблица на вашей странице?». Этот вопрос о том, как быстро заполнить таблицу независимо от того, сколько записей вы отобразите :)

17
Jan Zyka

Смотрите мой ответ на более ранний аналогичный запрос с использованием массивов и "join".

Никогда не используйте jQuery до самого конца, когда вы вызываете его только один раз. Кроме того, вырежьте конкатенацию строк, сохранив строки в массиве и используя метод "join", чтобы создать строку за один раз.

например.

 var r = new Array(), j = -1;
 for (var key=0, size=data.length; key<size; key++){
     r[++j] ='<tr><td>';
     r[++j] = data[key][0];
     r[++j] = '</td><td class="whatever1">';
     r[++j] = data[key][1];
     r[++j] = '</td><td class="whatever2">';
     r[++j] = data[key][2];
     r[++j] = '</td></tr>';
 }
 $('#dataTable').html(r.join('')); 
50
Neil

Попробуйте отложить добавление таблицы к работающему DOM как можно позже.

var table = $('<table>');   // create a new table

// populate the rows
....  .append(table);

// replace the existing table all in one go
$('#dataTable').replaceWith(table);

Это должно предотвратить любой макет страницы, пока вся таблица не будет готова.

Если производительность представляет собой реальную проблему, я бы также избегал вызова методов, которые требуют синтаксического анализа строк, как и все эти вызовы $('<td>'). Для одного элемента это может быть довольно дорого (хотя оно того стоит, если у вас длинная строка HTML).

Насколько я понимаю, добавление больших строк тегов с использованием .append() или .html() должно быть довольно эффективным. То, что вы потеряете, - это элемент управления, который вы получили бы, если бы использовали .text() для заполнения ячеек таблицы, чтобы избежать внедрения HTML-кода.

6
Alnitak

Вероятно, быстрее построить HTML-код для всей строки и добавить строку в таблицу, а не добавлять каждый отдельный элемент по одному. Вы также можете расширить это до построения всего HTML-кода в строке, а затем добавить его за один раз, что будет еще быстрее. В среде MVC я бы, вероятно, вернул частичное представление (HTML), в котором есть таблица, поскольку это будет поддерживать разделение интересов. Я бы не стал строить HTML на сервере (в контроллере), поскольку это означало бы, что вам придется менять код всякий раз, когда вы захотите изменить способ отображения таблицы. Если вы используете PHP или другой язык сценариев, выполните фильтрацию в соответствии с вашей средой.

var html = '';
for (var key=0, size=data.length; key<size;key++) {

  html += '<tr><td>'
             + data[key][0]
             + '</td><td class="whatever1">'
             + data[key][1]
             + '</td><td class="whatever2">'
             + data[key][2]
             + '</td></tr>';
}

$('#dataTable').append(html);
0
tvanfosson