Classic paging instance enhanced by js

Last Update:2018-12-08 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. displayed page:

Copy codeThe Code is as follows:

<! DOCTYPE html>

<Html>
<Head>
<Title> js_pageusers.html </title>

<! -- <Link rel = "stylesheet" type = "text/css" href = "./styles.css"> -->
<Script type = "text/javascript" src = "./js/pageuser. js"> </script>
</Head>

<Body>
<Div id = "one" align = "center">
<Div>
User name:
<Input type = "text" id = "userName"/>
Gender:
<Input type = "text" id = "userSex"/>
Occupation:
<Input type = "text" id = "userRole"/>
<Br/>
<Br/>
<Input type = "button" id = "addUsers" value = "Add User"/>
<Input type = "button" id = "updateUsers" value = "update user"/>
</Div>
<Br/>
<Br/>
<Div>
<Table border = "1px" cellpadding = "0" cellspacing = "0" width = "500px;">
<Thead>
<Th>
User Name
</Th>
<Th>
Gender
</Th>
<Th>
Occupation
</Th>

</Thead>

</Table>

</Div>
</Body>

</Html>

Copy codeThe Code is as follows: window. onload = function (){
Var pagesize = 3; // number of records displayed on each page
Var recondsize = 0; // The total number of records
Var countpage = 0; // total number of pages
Var nowpage = 1;
Var users = new Array (); // stores all records

Var start = 0; // Save the records starting from the current page
Var end = 0; // Save the end record of the current page

Var domUserName = $ ("userName ");
Var domUserSex = $ ("userSex ");
Var domUserRole = $ ("userRole ");

Var domshowUsers = $ ("showUsers ");
Var addBtn = $ ("addUsers ");

// Register an event for the button
AddBtn. onclick = function (){
// Create a user object
Var user = new User (domUserName. value, domUserSex. value,
DomUserRole. value );
// Store the user object in the array
Users. push (user );
Recondsize = users. length; // get the total number of records
// Calculate the total number of pages
Countpage = recondsize % pagesize = 0? Recondsize/pagesize: Math
. Ceil (recondsize/pagesize );

If (recondsize> pagesize) {// when the total number of records is greater than the number of pagezie ideas, count three numbers from the back
Start = recondsize-pagesize;
End = recondsize;
} Else {// pagesize start = 1;
Start = 0;
End = recondsize; // end = the actual number is recondsize
}

// Call the method for displaying the user
ShowUser (users, start, end, recondsize, countpage, domshowUsers );

}
// Obtain the page-related buttons
Var firstPage = $ ("firstPage ");
Var backPage = $ ("backPage ");
Var nextPage = $ ("nextPage ");
Var lastPage = $ ("lastPage ");

FirstPage. onclick = function (){
Nowpage = 1;

If (recondsize <= pagesize & recondsize> 0 ){
Start = 0;
End = recondsize;
} Else {
Start = 0;
End = pagesize;
}

ShowUser (users, start, end, recondsize, countpage, domshowUsers );

}

BackPage. onclick = function (){
Nowpage = nowpage-1; // revalue

If (nowpage <= 1 ){
Nowpage = 1;
}

If (recondsize <= pagesize & recondsize> 0 ){
Start = 0;
End = recondsize;
} Else {
Start = (nowpage-1) * pagesize;
End = (nowpage-1) * pagesize + pagesize;
}

ShowUser (users, start, end, recondsize, countpage, domshowUsers );

}

NextPage. onclick = function (){
Nowpage = nowpage + 1; // assign a value again

If (nowpage> = countpage ){
Nowpage = countpage;
}

If (recondsize <= pagesize & recondsize> 0 ){
Start = 0;
End = recondsize;
} Else {
Start = (nowpage-1) * pagesize;
If (nowpage-1) * pagesize + pagesize> = recondsize ){
End = recondsize;
} Else {
End = (nowpage-1) * pagesize + pagesize;
}
}
ShowUser (users, start, end, recondsize, countpage, domshowUsers );

}
LastPage. onclick = function (){
Nowpage = countpage; // assign a value again

If (recondsize <= pagesize & recondsize> 0 ){
Start = 0;
End = recondsize;
} Else {
Start = (nowpage-1) * pagesize;
End = recondsize;
}
ShowUser (users, start, end, recondsize, countpage, domshowUsers );

}

// Create a Function to save User object data
Function User (name, sex, role ){
This. name = name;
This. sex = sex;
This. role = role;
}

Function $ (id ){
Return document. getElementById (id );
}

Function showUser (users, start, end, recondsize, countpage, domshowUsers ){

// Clear data
For (var jj = 0; jj <domshowUsers. childNodes. length ;){
DomshowUsers. removeChild (domshowUsers. childNodes [jj]);
}

// Added by the for Loop
For (var I = start; I <end; I ++ ){
Var user = users [I]; // consider
// Create a row
Var tr = document. createElement ("tr ");
// Create a column
Var td1 = document. createElement ("td ");
// Create a text node
Var td1TextNode = document. createTextNode (user. name );
// Add a text node to td
Td1.appendChild (td1TextNode );

// Create a column
Var td2 = document. createElement ("td ");
// Create a text node
Var td2TextNode = document. createTextNode (user. sex );
// Add a text node to td
Td2.appendChild (td2TextNode );

// Create a column
Var td3 = document. createElement ("td ");
// Create a text node
Var td3TextNode = document. createTextNode (user. role );
// Add a text node to td
Td3.appendChild (td3TextNode );

// Add the column to the row
Tr. appendChild (td1 );
Tr. appendChild (td2 );
Tr. appendChild (td3 );

// Add rows to tbody
If (domshowUsers. hasChildNodes ()){
DomshowUsers. insertBefore (tr, domshowUsers. firstChild); // Add data before the last data
} Else {
DomshowUsers. appendChild (tr); // Add to the end
}
}
Document. getElementById ("msg"). innerHTML = "Total: {" + recondsize
+ "} Records, total {" + countpage + "} pages ";
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Classic paging instance enhanced by js

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support