js加強(qiáng)的經(jīng)典分頁實(shí)例
1顯示的頁面：
<!DOCTYPE html>
< html>
<head>
<title>js_pageusers.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<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>
用戶名:
<input type="text" id="userName" />
性別：
<input type="text" id="userSex" />
職業(yè)：
<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>
職業(yè)
</th>
</thead>
<tbody id="showUsers"></tbody>
</table>
<div>
<input type="button" id="firstPage" value="首頁"/>
<input type="button" id="backPage" value="上一頁"/>
<input type="button" id="nextPage" value="下一頁"/>
<input type="button" id="lastPage" value="末頁"/>
<span id="msg"></span>
</div>
</div>
</div>
</body>
</html>
2.
window.onload =function(){
var pagesize = 3;//每頁顯示的記錄數(shù)
var recondsize = 0;//總記錄數(shù)
var countpage = 0;//總頁數(shù)
var nowpage= 1;
var users = new Array();//存放所有的記錄
var start = 0; //保存當(dāng)前頁開始的記錄
var end = 0 ;//保存當(dāng)前頁結(jié)束的記錄
var domUserName = $("userName");
var domUserSex = $("userSex");
var domUserRole = $("userRole");
var domshowUsers = $("showUsers");
var addBtn = $("addUsers");
//為按鈕注冊事件
addBtn.onclick = function() {
//創(chuàng)建user對象
var user = new User(domUserName.value, domUserSex.value,
domUserRole.value);
//把user對象存放數(shù)組中
users.push(user);
recondsize = users.length; //得出總記錄數(shù)
//計(jì)算出總頁數(shù)
countpage = recondsize % pagesize == 0 ? recondsize / pagesize : Math
.ceil(recondsize / pagesize);
if (recondsize > pagesize) { //當(dāng)總記錄大于pagezie 思路 從后往前數(shù)3個(gè)數(shù)
start = recondsize-pagesize;
end=recondsize;
}else{ // pagesize start =1;
start=0;
end=recondsize; //end=實(shí)際的個(gè)數(shù) 就是 recondsize
}
//調(diào)用顯示user的方法
showUser(users,start,end,recondsize,countpage,domshowUsers);
}
//獲取分頁相關(guān)的按鈕
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);
}
}
//創(chuàng)建一個(gè)Function函數(shù) 函數(shù)是保存User對象數(shù)據(jù)的
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){
//清空數(shù)據(jù)
for ( var jj = 0; jj < domshowUsers.childNodes.length;) {
domshowUsers.removeChild(domshowUsers.childNodes[jj]);
}
//for循環(huán)添加的
for(var i=start;i<end;i++){
var user = users[i];//考慮
//創(chuàng)建一行
var tr = document.createElement("tr");
//創(chuàng)建列
var td1 = document.createElement("td");
//創(chuàng)建文本節(jié)點(diǎn)
var td1TextNode = document.createTextNode(user.name);
//文本節(jié)點(diǎn)添加到td中
td1.appendChild(td1TextNode);
//創(chuàng)建列
var td2 = document.createElement("td");
//創(chuàng)建文本節(jié)點(diǎn)
var td2TextNode = document.createTextNode(user.sex);
//文本節(jié)點(diǎn)添加到td中
td2.appendChild(td2TextNode);
//創(chuàng)建列
var td3 = document.createElement("td");
//創(chuàng)建文本節(jié)點(diǎn)
var td3TextNode = document.createTextNode(user.role);
//文本節(jié)點(diǎn)添加到td中
td3.appendChild(td3TextNode);
//把列添加到行中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//把行添加到tbody中
if(domshowUsers.hasChildNodes()){
domshowUsers.insertBefore(tr,domshowUsers.firstChild);//再最后一個(gè)數(shù)據(jù)之前添加數(shù)據(jù)
}else{
domshowUsers.appendChild(tr);//添加到末尾
}
}
document.getElementById("msg").innerHTML = "總共：{" + recondsize
+ "}條記錄,共{" + countpage + "}頁";
}
相關(guān)文章
使用JS監(jiān)聽鍵盤按下事件（keydown event）
這篇文章主要介紹了使用JS監(jiān)聽鍵盤按下事件（keydown event），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
H5+C3+JS實(shí)現(xiàn)雙人對戰(zhàn)五子棋游戲（UI篇）
這篇文章主要為大家詳細(xì)介紹了H5+C3+JS實(shí)現(xiàn)雙人對戰(zhàn)五子棋游戲，實(shí)現(xiàn)雙人對戰(zhàn)模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
Javascript正則控制文本框只能輸入整數(shù)或浮點(diǎn)數(shù)
這篇文章主要介紹Javascript正則如何控制文本框只能輸入整數(shù)或浮點(diǎn)數(shù),需要的朋友可以參考下2014-09-09
Bootstrap響應(yīng)式導(dǎo)航由768px變成992px的實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap響應(yīng)式導(dǎo)航由768px變成992px,需要的朋友可以參考下2017-06-06
IE8中使用javascript動態(tài)加載CSS的解決方法
這篇文章主要介紹了IE8中使用javascript動態(tài)加載CSS的解決方法,此方法也不是很完美,需要的朋友參考下吧2014-06-06
微信小程序--onShareAppMessage分享參數(shù)用處(頁面分享)
本篇文章主要介紹了微信小程序的頁面分享onShareAppMessage分享參數(shù)用處的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
Bootstrap基本插件學(xué)習(xí)筆記之折疊(22)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之折疊的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Bootstrap實(shí)現(xiàn)下拉菜單多級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)下拉菜單多級聯(lián)動，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
前端實(shí)現(xiàn)下載文件(包含壓縮包下載)方式詳細(xì)總結(jié)
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)下載文件(包含壓縮包下載)方式的相關(guān)資料,這段時(shí)間項(xiàng)目需要下載文件,所以這里給大家總結(jié)下,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JS?Date時(shí)間格式化的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01