JS enhanced classic paging example_javascript skills

1显示的页面：

复制代码 代码如下:

< html>

用户名:

性别：

职业：

用户名	性别	职业

2.

复制代码 代码如下:

window.onload =function(){
var pagesize = 3;//Number of records displayed on each page
var recondsize = 0;//Total number of records
var countpage = 0 ;//Total number of pages
var nowpage= 1;
var users = new Array();//Storage all records

var start = 0; //Save the record at the beginning of the current page
var end = 0;//Save the record at the end of the current page

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

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

//Register event for button
addBtn.onclick = function() {
//Create user object
var user = new User(domUserName.value, domUserSex.value,
domUserRole. value);
//Save 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 records are greater than pagezie, count 3 numbers from back to front
start = recondsize-pagesize;
end=recondsize;
}else{ / /pagesize start =1;
start=0;
end=recondsize; //end=The actual number is recondsize
}

//Call the method to display user
showUser(users,start,end,recondsize,countpage,domshowUsers);

}
//Get paging 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;//Reassign value

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; //Reassign value

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;//Reassign value

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 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 for loop for(var i=start;i var user = users[i];//Consider
//Create a row
var tr = document.createElement("tr");
//Create column
var td1 = document.createElement("td");
//Create text node
var td1TextNode = document. createTextNode(user.name);
//Add text node to td
td1.appendChild(td1TextNode);

//Create column
var td2 = document.createElement("td");
//Create text node
var td2TextNode = document.createTextNode(user.sex);
// Text node is added to td
td2.appendChild(td2TextNode);

//Create column
var td3 = document.createElement("td");
//Create text node
var td3TextNode = document.createTextNode(user.role);
// Text nodes are added to td
td3.appendChild(td3TextNode);

//Add columns to rows
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, totaling {" countpage "}pages";
}