У меня есть приложение, которое используется для анализа данных, и у меня возникает несколько проблем с производительностью при создании таблицы. Данные извлекаются из документов, и важно, чтобы все данные были представлены на одной странице (к сожалению, разбиение на страницы недоступно).
Используя jQuery, я делаю запрос ajax на сервер для извлечения данных. По завершении запроса я передаю данные функции вывода. Функция вывода проходит через массив данных с использованием цикла for и конкатенации строк в переменную. Как только цикл завершен, переменная, содержащая таблицу, затем добавляется к существующему div на странице, а затем я продолжаю привязывать события к таблице для работы с данными.
С небольшим набором данных (~ 1000-2000 строк) он работает относительно хорошо, но некоторые из наборов данных содержат более 10 000 строк, что заставляет Firefox либо сбой, либо закрытие, либо отказ от ответа.
Мой вопрос: есть ли лучший способ добиться того, что я делаю?
Вот код:
//This function gets called by the interface with an id to retrieve a document
function loadDocument(id){
$.ajax({
method: "get",
url: "ajax.php",
data: {action:'loadDocument',id: id},
dataType: 'json',
cache: true,
beforeSend: function(){
if($("#loading").dialog('isOpen') != true){
//Display the loading dialog
$("#loading").dialog({
modal: true
});
}//end if
},//end beforesend
success: function(result){
if(result.Error == undefined){
outputDocument(result, id);
}else{
<handle error code>
}//end if
if($('#loading').dialog('isOpen') == true){
//Close the loading dialog
$("#loading").dialog('close');
}//end if
}//end success
});//end ajax
};//end loadDocument();
//Output document to screen
function outputDocument(data, doc_id){
//Begin document output
var rows = '<table>';
rows += '<thead>';
rows += '<tr>';
rows += '<th>ID</th>';
rows += '<th>Status</th>';
rows += '<th>Name</th>';
rows += '<th>Actions</th>';
rows += '<th>Origin</th>';
rows += '</tr>';
rows += '</thead>';
rows += '<tbody>';
for(var i in data){
var recordId = data[i].id;
rows += '<tr id="' + recordId + '" class="' + data[i].status + '">';
rows += '<td width="1%" align="center">' + recordId + '</td>';
rows += '<td width="1%" align="center"><span class="status" rel="' + recordId + '"><strong>' + data[i].status + '</strong></span></td>';
rows += '<td width="70%"><span class="name">' + data[i].name + '</span></td>';
rows += '<td width="2%">';
rows += '<input type="button" class="failOne" rev="' + recordId + '" value="F">';
rows += '<input type="button" class="promoteOne" rev="' + recordId + '" value="P">';
rows += '</td>';
rows += '<td width="1%">' + data[i].origin + '</td>';
rows += '</tr>';
}//end for
rows += '</tbody>';
rows += '</table>';
$('#documentRows').html(rows);
Сначала я использовал jQuery каждый цикл, но переключился на цикл for, который сбрил несколько мс.
Я думал использовать что-то вроде google gears, чтобы попытаться выгрузить часть обработки (если это возможно в этом сценарии).
Любые мысли?
