I have an application which is used for data analysis and I'm having a few performance issues with the creation of the table. The data is extracted from documents and it is important that all data is presented on one page (pagination is not an option unfortunately).

Using jQuery, I make an ajax request to the server to retrieve the data. On completion of the request, I pass the data to an output function. The output function loops through the data array using a for loop and concatenating the rows to a variable. Once the looping is complete, the variable containing the table is then appended to an existing div on the page and then I go on to bind events to the table for working with the data.

With a small set of data (~1000-2000 rows) it works relatively good but some of the data sets contain upwards of 10,000 rows which causes Firefox to either crash and close or become unresponsive.

My question is, is there a better way to accomplish what I am doing?

Here's some code:

//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);

I was initially using a jQuery each loop but switched to the for loop which shaved off some ms.

I thought of using something like google gears to try offloading some of the processing (if that's possible in this scenario).

Any thoughts?