Monday, June 3, 2024
Homepage · c#
 Popular · Latest · Hot · Upcoming
1
rated 0 times [  4] [ 3]  / answers: 1 / hits: 18155  / 12 Years ago, mon, september 24, 2012, 12:00:00

Instead of using a table plugin by someone else, I choose to do it the standard HTML way of making Tables and rows etc etc. I would fetch data from a database to fill the rows. But when the number of rows exceeded 10,000, I realized I needed to lazy_load the rows otherwise the website would be incredibly slow. I've looked for ways to lazy load rows of a table, but I can't seem to find it anywhere, so my question is simply does the lazyloading plug-in or for rows even exist?



Hope some guru can answer this. Thanks in advance!




Background as to what I'm trying to do: I'm creating the rough sketch
of the table in the html code, then during runtime, I will add rows to
the table through DOM when the user searches for particular things.
When they search it, there will be thousands of results, and I want to
lazyload the result into the table.




jQuery provides lazyload for images and containers of images.



Some other plug-ins allowed for lazyloading of divs.



Lazyloading for table rows however seemed to be non-existant.



Some sample code for context:



HTML:



        <fieldset>
<legend>PhotoViewer v1.6</legend>
<h4 id = albumName><i>Photos</i></h4>
<table cellspacing=1 border=2 id = photoTable class = lazyProgressiveLoad>
<tr style=font-style: italic; font-size: small; font-family: Segoe UI Light; color: Red>
<th>--Photo--</th>
<th>--Label--</th>
<th>--Path--</th>
<th><input type=button value=Add Photo onclick=addPhoto() id = addPhoto/></th>
</tr>
</table>
</fieldset>



Looking for some code that will allow the same functionality as the code below
for table rows.




Javascript:



$(function() {
$(img).lazyload({
effect : fadeIn
/*
,appear : function(elements_left, settings) {
console.log(appear);
console.log(elements_left);
//console.log(this, elements_left, settings);
},
load : function(elements_left, settings) {
console.log(load);
console.log(elements_left);
//console.log(this, elements_left, settings);
}
*/
});
});

More From » c#

 Answers
47

Having thousands of rows of data in the DOM is an awful idea for one simple reason: the DOM is slow.



Instead, only render the rows that need to be visible. When a row goes out of view, remove it from the DOM.



My favorite library for displaying a grid of data is SlickGrid. By only rendering DOM elements for the data in the viewport, it can display effectively unlimited amounts data with astounding performance. (That example displays a half-million rows!)



There are more examples that show off SlickGrid's features, but you'll be especially interested in the AJAX loading example, where small chunks of rows are streamed from the server as you scroll.


[#82926] Saturday, September 22, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
tiasavannahw

Total Points: 448
Total Questions: 122
Total Answers: 113

Location: Maldives
Member since Tue, Dec 21, 2021
3 Years ago
tiasavannahw questions
Sun, Oct 11, 20, 00:00, 4 Years ago
Sat, Aug 29, 20, 00:00, 4 Years ago
Sat, May 30, 20, 00:00, 4 Years ago
Mon, Mar 23, 20, 00:00, 4 Years ago
;