js分页实例
案例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>
