Js table tens of thousands of data instant loading implementation code_javascript skills

Js form, tens of thousands of data are loaded instantly

In the actual application of Ajax dynamically loading data, everyone is accustomed to a way of thinking: one piece of data creates one row.
So if the amount of data is large and the data needs to be loaded at once, the browser will be stuck for a long time

Inspired by the Flex DataGrid control, in the Flex DataGrid control, the method of displaying data is not the same. It does not create as many rows as there are pieces of data. It only creates at most a dozen or twenty rows (assumed to be n rows) that you see on the interface. If there is a lot of data, you will be extracted from the data during the scrolling process. The n rows of data that should be seen are re-displayed in the n rows of controls that have been created.
In other words, in Flex's DataGrid control, what we actually see are only the n rows of controls, but the data they display is filtered out based on the scroll bar status.

So, if a similar method is used in JS, then even if there are tens of thousands of data, you may only need to create dozens of Dom, and the efficiency will naturally be much faster.
Without further ado, let’s get into the code. First, you need a scroll bar
Scrollbar.js

Copy code The code is as follows:

function Scrollbar() {
this.options = {
total : 0, //Total number of data
pos : 0, //Current scroll position
itemSize : 20, //Single item size
size : 200 //Control size
};
}
Scrollbar.prototype = (function () {
function setOptions(options) {
for (var attr in options) {
this.options[attr] = options[attr];
}
Refresh(this);
}
function Refresh(_this) {
if (!_this.created)
return; //Set the control height
_this.bar.style.height = _this.options.size "px";
//Set the content height
var ch = _this.options.total * _this. options.itemSize;
_this.content.style.height = ch "px";
}
//Get the scroll position
function getPos() {
var top = this.bar. scrollTop;
var pos = parseInt(top / this.options.itemSize);
return pos;
}
//The number of data that can be displayed on each page
function getPageItems() {
return this.options.size / this.options.itemSize;
}
//Scroll event response
function OnScroll(_this) {
var pos = _this.getPos();
if (pos == _this.options.pos)
return;
_this.options.pos = pos;
_this.onScroll(pos);
}
//Scroll bar creation
function CreateAt(dom) {
var _this = this;
var bar = document.createElement("div");
var content = document.createElement("div");
bar.appendChild(content);
bar.style.width = "19px";
bar.style.overflowY = "scroll";
bar.style.overflowX = "hidden";
if (bar.attachEvent) {
bar.attachEvent("onscroll", function () {
OnScroll(_this);
});
} else {
//firefox compatible
bar.addEventListener("scroll", function () {
OnScroll(_this);
}, false);
}
content.style.backgroundColor = "white";
content .style.width = "1px";
this.bar = bar;
this.content = content;
if (typeof(dom) == "string") {
dom = document. getElementById(dom);
}
dom.innerHTML = "";
dom.appendChild(this.bar);
this.created = true;
Refresh(this);
}
return {
setOptions : setOptions,
CreateAt : CreateAt,
getPos : getPos,
getPageItems : getPageItems,
onScroll : null
//Simulate scroll bar events
};
})();

Page code:

Copy codeThe code is as follows: