js加強的經典分頁執行個體

最後更新：2013-10-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1顯示的頁面：
複製代碼代碼如下:

<!DOCTYPE html>

< html>
<head>
<title>js_pageusers.html</title>

<script type="text/javascript" src="./js/pageuser.js"></script>
</head>

<body>
<div id="one" align="center">
<div>
使用者名稱:
<input type="text" id="userName" />
性別：
<input type="text" id="userSex" />
職業：
<input type="text" id="userRole" />
<br />
<br />
<input type="button" id="addUsers" value="添加使用者" />
<input type="button" id="updateUsers" value="更新使用者" />
</div>
<br />
<br />
<div>
<table border="1px" cellpadding="0" cellspacing="0" width="500px;">
<thead>
<th>
使用者名稱
</th>
<th>
性別
</th>
<th>
職業
</th>

</thead>

</table>

</div>
</body>

</html>

2.
複製代碼代碼如下:
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() {
//建立user對象
var user = new User(domUserName.value, domUserSex.value,
domUserRole.value);
//把user對象存放數組中
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
}

//調用顯示user的方法
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<= 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;//重新賦值

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;//重新賦值

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;//重新賦值

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

}

//建立一個Function函數函數是儲存User對象資料的
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){

//清空資料
for ( var jj = 0; jj < domshowUsers.childNodes.length;) {
domshowUsers.removeChild(domshowUsers.childNodes[jj]);
}

//for迴圈添加的
for(var i=start;i<end;i++){
var user = users[i];//考慮
//建立一行
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 + "}頁";
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

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

js加強的經典分頁執行個體

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support