Js table of ten thousand data instantly load the implementation code
- 2020-03-30 02:05:07
- OfStack
Js table, ten thousand data load instantly
In the real world of Ajax, where data is loaded dynamically, you're used to the idea of creating a row for each piece of data.
So if the number of large, to load the data at once, the browser will be stuck for half a day
Inspired by the Flex DataGrid control, in the Flex DataGrid control, show the method of data is not how many how much data is created, it at most, only you can see in the interface of a decade or two rows (assuming for n rows), if the data is much, in the process of rolling, will be drawn from the data you should see the n rows of data, to show the nice n line control has been created.
That is, in Flex's DataGrid control, we actually see only the n-row controls, except that the data they display is filtered by the scrollbar state.
Therefore, if JS is implemented in a similar way, then it is tens of thousands of pieces of data, and it may only need to create dozens of Dom, so the efficiency is much faster.
Without further ado, go to code. First, you need a scroll bar
Scrollbar. Js
Page code:
In the real world of Ajax, where data is loaded dynamically, you're used to the idea of creating a row for each piece of data.
So if the number of large, to load the data at once, the browser will be stuck for half a day
Inspired by the Flex DataGrid control, in the Flex DataGrid control, show the method of data is not how many how much data is created, it at most, only you can see in the interface of a decade or two rows (assuming for n rows), if the data is much, in the process of rolling, will be drawn from the data you should see the n rows of data, to show the nice n line control has been created.
That is, in Flex's DataGrid control, we actually see only the n-row controls, except that the data they display is filtered by the scrollbar state.
Therefore, if JS is implemented in a similar way, then it is tens of thousands of pieces of data, and it may only need to create dozens of Dom, so the efficiency is much faster.
Without further ado, go to code. First, you need a scroll bar
Scrollbar. Js
function Scrollbar() {
this.options = {
total : 0, //The total number of data
pos : 0, //Current scroll position
itemSize : 20, //Single size
size : 200 //Control the 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 control height
_this.bar.style.height = _this.options.size + "px";
//Setting 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 amount of data that can be displayed per page
function getPageItems() {
return this.options.size / this.options.itemSize;
}
//Rolling event response
function OnScroll(_this) {
var pos = _this.getPos();
if (pos == _this.options.pos)
return;
_this.options.pos = pos;
_this.onScroll(pos);
}
//Scrollbar 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 is compatible with
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
//Simulates scroll bar events
};
})();
Page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Form controls
</title>
<script src="Scrollbar.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
var data = [];
//Create 10,000 sample data
for (var i = 0; i < 10000; i++) {
var row = {
id: i,
text: "text" + i
};
data.push(row);
}
//Create a scroll bar
var scrbar = new Scrollbar();
window.onload = function() {
scrbar.CreateAt("divScroll");
scrbar.setOptions({
total: 10000,
size: 300
});
scrbar.onScroll = function(pos) {
ShowData(pos);
}
//Access to the template
var items = scrbar.getPageItems();
var tpl = document.getElementById("trTpl");
tpl.parentNode.removeChild(tpl);
//Create only a few dozen rows of the table you see, so it's naturally much faster
var list = document.getElementById("tblList");
for (var i = 0; i < data.length && i < items; i++) {
var nr = tpl.cloneNode(true);
//Copy the new line from the template line
list.appendChild(nr);
}
ShowData(scrbar.getPos());
}
//Display the data according to the scroll bar
function ShowData(pos) {
var n = scrbar.getPageItems();
var rows = document.getElementById("tblList").rows;
for (var i = 0; i < n; i++) {
var row = rows[i];
var item = data[i + pos];
row.cells["tdID"].innerHTML = item["id"];
row.cells["tdText"].innerHTML = item["text"];
}
}
</script>
</head>
<body>
<div id="divScroll" style="float:right">
</div>
<table border="1">
<!-- Row headings -->
<thead>
<tr>
<th>
ID
</th>
<th>
Text
</th>
</tr>
</thead>
<!-- Data display area -->
<tbody id="tblList">
<tr id="trTpl">
<td id="tdID">
</td>
<td id="tdText">
</td>
</tr>
</tbody>
</table>
</body>
</html>