Home > Developer > JavaScript
Js tables that load tens of thousands of data records instantly
In the practical application of Ajax dynamic loading data, everyone is used to a way of thinking: creating a row of data.
If the data is loaded at a time when the number is large, the browser will be stuck for half a day.
Inspired by the Flex DataGrid Control, in the Flex DataGrid Control, the method for displaying data is not to create as many rows as there are many data records, it can only create a dozen or twenty rows you can see on the interface (assuming n rows). If there is too much data, during the scrolling process, the n rows that you should see will be extracted from the data and re-displayed in the created n rows control.
That is to say, in the DataGrid Control of Flex, we actually see only the n-row controls, but the data they display is filtered out based on the scroll bar status.
Therefore, if a similar method is used in JS, tens of thousands of data records may be used to create dozens of Dom records, which is much more efficient.
Let's talk about the code. First, a scroll bar is required.
Scrollbar. js
Copy codeThe Code is as follows:
Function Scrollbar (){
This. options = {
Total: 0, // total data
Pos: 0, // current rolling position
ItemSize: 20, // individual 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 ";
}
// Obtain the scroll position
Function getPos (){
Var top = this. bar. scrollTop;
Var pos = parseInt (top/this. options. itemSize );
Return pos;
}
// Number of data displayed on each 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 );
}
// Create a scroll bar
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 compatibility
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 a scroll bar event
};
})();
Page code:
Copy codeThe Code is as follows:
<! 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>
Table Control
</Title>
<Script src = "Scrollbar. js" type = "text/javascript">
</Script>
<Script language = "javascript" type = "text/javascript">
Var data = [];
// Create 10 thousand sample data entries
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 );
}
// Obtain the Template
Var items = scrbar. getPageItems ();
Var tpl = document. getElementById ("trTpl ");
Tpl. parentNode. removeChild (tpl );
// Create only dozens of rows of tables, so it is much faster.
Var list = document. getElementById ("tblList ");
For (var I = 0; I <data. length & I <items; I ++ ){
Var nr = tpl. cloneNode (true );
// Copy a new row from the template row
List. appendChild (nr );
}
ShowData (scrbar. getPos ());
}
// Display data based on 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 title -->
<Thead>
<Tr>
<Th>
ID
</Th>
<Th>
Text
</Th>
</Tr>
</Thead>
<! -- Data display zone -->
<Tbody id = "tblList">
<Tr id = "trTpl">
<Td id = "tdID">
</Td>
<Td id = "tdText">
</Td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
