CODEWITHSUNDEEP
javascriptjqueryajaxstring-concatenation
Viginesh
Viginesh

Reputation: 258

Displaying 14.5k+ records in table hangs webpage

I use combination of JS & AJAX to display 14.5k+ records of data in a table.

The data retrieved from database is iterated & concatenated with '+='. After the for loop, the string is added to the table using $('#tableDiv').html(concatString);

The columns can be sorted on click. If more than 2k records are displayed then the sort takes time to execute and this case it seems like it hangs for few seconds and then shows sorted records.

In addition to this, there is a '+' sign in the last column. On click, I'm adding a row with text fields and again on click it's removed. There's no life to this row expand when I click '+'. I'm using the following code for adding the row.

$('.plusToggle').live("click", function() { var row = $(this).closest("tr"); currentSection =id.split('&Id=')[0]; insertRow = "<tr id='notes,"+currentSection+"'><td class='col-md-1 text-center' > <div class='form-group notes'>" + "<input class='form-control Summary' type='text' id='Summary,"+currentSection+"' placeholder='Summary' /><br/>" + "<textarea class='form-control Notes' rows='5' id='Notes,"+currentSection+"' ></textarea>" + "</div></td></tr>"; if(currentSection != previousSection) { $(insertRow).insertAfter(row).hide(); $('#notes,'+currentSection).show("blind"); document.getElementById('Summary,'+currentSection).focus(); $('#notes,'+previousSection).hide(1000); notesClicked = ''; $("#notes,"+previousSection).remove(); } else { if(notesClicked) { $(insertRow).insertAfter(row).hide(); $('#notes,'+currentSection).show("blind"); document.getElementById('Summary,'+currentSection).focus(); notesClicked = ''; } else { $('#notes,'+currentSection).hide("blind"); notesClicked = 'TRUE'; } }});

When I inspected in Chrome, the line .show("blind") is taking longer time to execute. Pagination & lazy loading works out well but my high authority wants only scroll - no pages or dynamic loading.

How do I display 14.5k records in a table and also have the sort & row expand feature work smoothly?

Upvotes: 0

Views: 59

Answers (1)

Stan
Stan

Reputation: 26511

Displaying (rendering) that amount of data is foolish, of course it's going to freeze the browser.

What you need to do is make sure you display only 10-100 items and sort/filter them in back-end. I suggest using https://www.datatables.net/ for that, it has pretty straight forward back-end implementation instructions.

Upvotes: 1

Related Questions