JS 향상된 클래식 페이징 example_javascript 기술-JS 튜토리얼-php.cn

1显示的页면：

< html>

js_pageusers.html

사용 이름:

性别：

职业：

<번째>
사용명

window.onload =function(){
var pagesize = 3;//각 페이지에 표시되는 레코드 수
var recondsize = 0;//총 레코드 수
var countpage = 0 ;//총 페이지 수
var nowpage= 1;
var users = new Array();//모든 기록 저장

var start = 0; //현재 페이지의 시작 부분에 레코드 저장
var end = 0;//현재 페이지의 끝 부분에 레코드 저장

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

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

//버튼 이벤트 등록
addBtn.onclick = function() {
//사용자 객체 생성
var user = new User(domUserName.value, domUserSex.value,
domUserRole. value);
//사용자 개체를 배열에 저장
users.push(user);
recondsize = users.length; //총 레코드 수 가져오기
//총계 계산 페이지 수
countpage = recondsize % pagesize == 0 ? recondsize / pagesize : Math
.ceil(recondsize / pagesize);

if (recondsize > pagesize) { //총 레코드가 pagezie보다 큰 경우 뒤에서 앞으로 3개의 숫자를 센다
start = recondsize-pagesize;
end=recondsize;
}else { / /pagesize start =1;
start=0;
end=recondsize; //end=실제 크기는 recondsize입니다
}

//사용자를 표시하는 메소드 호출
showUser(users,start,end,recondsize,countpage,domshowUsers);

}
//페이징 관련 버튼 가져오기
var firstPage = $("firstPage");
var backPage = $("backPage");
var nextPage = $("nextPage " );
var lastPage = $("lastPage");

firstPage.onclick = function() {
nowpage = 1;

if (recondsize<= 페이지 크기 && recondsize > 0) {
start = 0;
end = recondsize;
}else{
start=0;
end=pagesize;
}

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

}

backPage.onclick = function() {
nowpage = nowpage-1;//값 재지정

if(nowpage<=1){
nowpage=1;
}

if (recondsize <= 페이지 크기 && recondsize > 0) {
start = 0;
end = recondsize;
}else{
start=(nowpage-1)*pagesize;
end = (nowpage-1)*pagesize 페이지 크기;
}

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

}

nextPage.onclick = function() {
nowpage = nowpage 1 //값 재지정

if(nowpage>=countpage){
nowpage=countpage;
}

if (recondsize <= 페이지 크기 && recondsize > 0) {
start = 0;
end = recondsize;
}else{
start=(nowpage-1)*pagesize;
if((nowpage-1)*pagesize 페이지 크기>=recondsize){
end = recondsize;
}else{
end =(nowpage-1)*pagesize 페이지 크기;
}
}
showUser(users,start,end,recondsize,countpage,domshowUsers);

}
lastPage.onclick = function() {
nowpage = countpage;//값 재할당

if (recondsize <= 페이지 크기 && recondsize > 0) {
start = 0;
end = recondsize;
}else{
start=(nowpage-1)*pagesize;
end = recondsize;
}
showUser(users,start,end,recondsize,countpage,domshowUsers);

}

//User 객체 데이터를 저장하는 함수 함수 생성
function User(name, sex, role) {
this.name = name;
this.sex = sex;
this. 역할 = 역할;
}

함수 $(id) {
return document.getElementById(id);
}

함수 showUser(users,start,end,recondsize,countpage,domshowUsers){

//데이터 지우기
for ( var jj = 0; jj < domshowUsers.childNodes.length;) {
domshowUsers.removeChild(domshowUsers.childNodes[jj]);
}

//
for 루프에 의해 추가됨 for(var i=start;i var user = users[i];//Consider
//행 생성
var tr = document.createElement("tr");
//열 생성
var td1 = document.createElement("td");
//텍스트 노드 생성
var td1TextNode = document . createTextNode(user.name);
//td에 텍스트 노드 추가
td1.appendChild(td1TextNode);

//열 생성
var td2 = document.createElement("td");
//텍스트 노드 생성
var td2TextNode = document.createTextNode(user.sex);
// 텍스트 노드가 td
td2.appendChild(td2TextNode);

에 추가되었습니다.

//열 생성
var td3 = document.createElement("td");
//텍스트 노드 생성
var td3TextNode = document.createTextNode(user.role);
// 텍스트 노드가 td
td3.appendChild(td3TextNode);

에 추가되었습니다.

//행에 열 추가
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);

//tbody에 행 추가
if(domshowUsers.hasChildNodes()){
domshowUsers.insertBefore(tr,domshowUsers.firstChild);//마지막 데이터 앞에 데이터 추가
} else{
domshowUsers.appendChild(tr);//끝에 추가
}
}
document.getElementById("msg").innerHTML = "총계: {" recondsize
"} 레코드, 총 {" countpage "}페이지";
}