jQuery Grid virtual scrolling, lazy loading of records without pager

Lazy loading of large data: 10 million rows

This example is displaying data stored in a sql server database with 10 million ( 10,000,000 ) records. . Typically this kind of data occupies many Giga bytes of storage on remote server.

Records are fetched from remote database in small batches depending upon the scrollbar position in viewport. This methodology is deemed appropriate in situations where the quantity of records to be fetched from a remote server is so substantial that even the utilization of background loading becomes impractical. This is primarily due to the inherent risk of overwhelming the user's local resources, thereby necessitating a more strategic and resource-conscious retrieval approach.

The server side script combines the scripts used for remote paging, remote filtering and remote sorting. The records can be sorted and filtered remotely.

Comparison with other ways of loading remote data ( without pager UI )

-	Background loading	Lazy loading	Remote loading
Modus operandi	Viewport records are loaded with the highest priority, beginning with those corresponding to the initial and current position of the scrollbar. Subsequently, records in proximity to the viewport scroll position are loaded, continuing this process until all records are fetched and loaded in the browser.	Initially, records corresponding to the current viewport position are loaded. Additional records are loaded only upon scrolling, provided there are no existing rows at the new scroll position.	All the records are loaded in a single batch
Value of `dataModel.location`	lazy	remote	remote
Usage of `pageModel.rPP`	yes	no	no
Approximate no of rows	10,000 - 500,000	Unlimited rows ( tested till 50,000,000 )	~ 10,000
Supported features	Plain grid Row detail / Nesting of grids Row grouping Pivot Local sorting, filtering ( only after entire data is loaded ) Remote sorting, filtering Checkbox columns Batch editing	Plain grid Remote sorting, filtering Checkbox columns Batch editing	All features
Grid interactivity while data is fetched	Partially interactive after intial batch of data	Fully interactive after intial batch of data	Not until entire data is loaded
Progress bar	Present	Not applicable	Not applicable

Pro tip: pqVS.rpp value should always be more than number of rendered rows in the viewport otherwise some of the rows may remain empty with fast scrolling up and down the grid. In this example number of rendered rows in viewport is ~12 in normal view while ~21 when grid is in full screen mode, so rpp is chosen to be 100.