Building a table from the result of an AJAX call

Question

I am looping through content coming from the database using an ajax call. Then I'm building a table using a for loop. Is there a faster way to build the table using the data from the database or is this way efficient enough?

var getPages = '<table><thead><tr><th>Page Num</th><th>Type</th><th>Month</th><th>Name</th><th>Reg No.</th><th>Rrc District</th></tr></thead><tbody>';
for(var i=0; i<getPagesResponse.length; i++) {
 getPages += '<tr class="getPagesRowEdit"><td>' + getPagesResponse["PageNum"][i] + '</td><td class="pagesPageType">' + getPagesResponse["PageType"][i] + '</td><td class="pagesMonth">' + getPagesResponse["ReportingMonth"][i] + '</td><td class="pagesFilerName">' + getPagesResponse["FilerName"][i] + '</td><td class="pagesFilerRegNo">' + getPagesResponse["FilerRegNo"][i] + '</td><td class="pagesRrcDistrict">' + getPagesResponse["RrcDistrict"][i] + '</td></tr>';
}
getPages += '</tbody></table>';
//add table to div
$("#pagesTable").html(getPages);

Answer 1

i think it is good approach, if data return from database is in small size (i.e limited record say 10,20 etc).

• JBaldwin: What if the data is 100+ rows or possibly 1000's? This data set is around 3500 rows of data. It loads fairly quickly. I just wasn't sure if there was a quicker way