案例1
1.js_pageusers.html
<!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"> <script type="text/javascript" src="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> <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.pageuser.js
function setPage(){ 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 + "}頁"; }
案例2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>js分頁技術</title> </head> <body> <table width="500" border="0" cellpadding="5" cellspacing="1" bgcolor="#999999"> <tbody id="table2"> <tr> <td bgcolor="#FFFFFF"> 1 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 2 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 3 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 4 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 5 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 6 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 7 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 8 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 9 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 10 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td bgcolor="#FFFFFF"> 11 </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> </tr> </tbody> </table> <span id="spanFirst">第一頁</span> <span id="spanPre">上一頁</span> <span id="spanNext">下一頁</span> <span id="spanLast">最后一頁</span> 第 <span id="spanPageNum"></span>頁/共 <span id="spanTotalPage"></span>頁 </body> </html> <script> var theTable = document.getElementById("table2"); var totalPage = document.getElementById("spanTotalPage"); var pageNum = document.getElementById("spanPageNum"); var spanPre = document.getElementById("spanPre"); var spanNext = document.getElementById("spanNext"); var spanFirst = document.getElementById("spanFirst"); var spanLast = document.getElementById("spanLast"); var numberRowsInTable = theTable.rows.length; var pageSize = 3; var page = 1; //下一頁 function next() { hideTable(); currentRow = pageSize * page; maxRow = currentRow + pageSize; if (maxRow > numberRowsInTable) maxRow = numberRowsInTable; for ( var i = currentRow; i < maxRow; i++) { theTable.rows[i].style.display = '';//currentRow ~ maxRow 內顯示出來 } page++; if (maxRow == numberRowsInTable) { nextText(); lastText(); } showPage(); preLink(); firstLink(); } //上一頁 function pre() { hideTable(); page--; currentRow = pageSize * page; maxRow = currentRow - pageSize; if (currentRow > numberRowsInTable) currentRow = numberRowsInTable; for ( var i = maxRow; i < currentRow; i++) { theTable.rows[i].style.display = ''; } if (maxRow == 0) { preText(); firstText(); } showPage(); nextLink(); lastLink(); } //第一頁 function first() { hideTable(); page = 1; for ( var i = 0; i < pageSize; i++) { theTable.rows[i].style.display = ''; } showPage(); preText(); nextLink(); lastLink(); } //最后一頁 function last() { hideTable(); page = pageCount(); currentRow = pageSize * (page - 1); for ( var i = currentRow; i < numberRowsInTable; i++) { theTable.rows[i].style.display = ''; } showPage(); preLink(); nextText(); firstLink(); } function hideTable() { for ( var i = 0; i < numberRowsInTable; i++) { theTable.rows[i].style.display = 'none'; } } function showPage() { pageNum.innerHTML = page; } //總共頁數 function pageCount() { var count = 0; if (numberRowsInTable % pageSize != 0) count = 1; return parseInt(numberRowsInTable / pageSize) + count; } //顯示鏈接 function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一頁</a>"; } function preText() { spanPre.innerHTML = "上一頁"; } function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一頁</a>"; } function nextText() { spanNext.innerHTML = "下一頁"; } function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一頁</a>"; } function firstText() { spanFirst.innerHTML = "第一頁"; } function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一頁</a>"; } function lastText() { spanLast.innerHTML = "最后一頁"; } //隱藏表格 function hide() { for ( var i = pageSize; i < numberRowsInTable; i++) { theTable.rows[i].style.display = 'none'; } totalPage.innerHTML = pageCount(); pageNum.innerHTML = '1'; nextLink(); lastLink(); } hide(); </script>