js实现分页的几个源码，看完基本就懂了
2015-10-18 21:40
591 查看
第一种： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>addUser.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="../js/wpCalendar.js"></script> </head> <body> <div align="center"> <h1> 显示有的用户界面 </h1> <div style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%"> <table border="1px" cellpadding="0" cellspacing="0" id="tusers"> <thead> <tr> <th> <input type="checkbox" name="chbk" id="chbk1" /> </th> <th> 名称 </th> <th> 性别 </th> <th> 邮箱 </th> <th> 出生日期 </th> <th> 操作 </th> </tr> </thead> <tbody id="users"> </tbody> </table> <div id="pages"> </div> </div> <div style="border: 1px blue solid;"> <form> <table id="divs"> <tbody id="addUsers"> <tr> <td> 用户名: </td> <td> <input type="text" name="name" id="name" /> </td> </tr> <tr> <td> 性别: </td> <td> <select id="sex"> <option value="男"> 男 </option> <option value="女"> 女 </option> </select> </td> </tr> <tr> <td> 邮箱: </td> <td> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td> 出生日期: </td> <td> <input type="text" id="bir" name="bir" /> <input type=button value="点击看我" onclick="showCalendar(this,document.all.bir)"> </td> </tr> <tr id="addu"> <td colspan="2"> <input type="button" value="添加" onclick="addUser()" id="add" /> </td> </tr> <tr id="addu1"> <td colspan="2"> <input type="button" value="修改" id="upduser" /> </td> </tr> </tbody> </table> </form> </div> </div> </body></html><script>window.onload = function() { document.getElementByIdx_x("addu1").style.display = "none";}function addUser() { var name = document.getElementByIdx_x("name").value; var sex = document.getElementByIdx_x("sex").value; var email = document.getElementByIdx_x("email").value; var bir = document.getElementByIdx_x("bir").value; //获取表格节点对象 var tusers = document.getElementByIdx_x("tusers"); //创建行 var tr1 = document.createElement_x("tr"); var cbk = document.createElement_x("td"); var tname = document.createElement_x("td"); var tsex = document.createElement_x("td"); var temail = document.createElement_x("td"); var tbir = document.createElement_x("td"); var toper = document.createElement_x("td"); var cbk1 = document.createElement_x("input"); cbk1.setAttribute("type", "checkbox"); cbk1.setAttribute("name", "chbk"); cbk.appendChild(cbk1); tname.appendChild(document.createTextNode(name)); tsex.appendChild(document.createTextNode(sex)); temail.appendChild(document.createTextNode(email)); tbir.appendChild(document.createTextNode(bir)); var adelete = document.createElement_x("a"); var aupdate = document.createElement_x("a"); adelete.setAttribute("href", "#"); aupdate.setAttribute("href", "#"); adelete.appendChild(document.createTextNode("删除 |")); aupdate.appendChild(document.createTextNode("修改")); toper.appendChild(adelete); toper.appendChild(aupdate) //往行中添加 tr1.appendChild(cbk); tr1.appendChild(tname); tr1.appendChild(tsex); tr1.appendChild(temail); tr1.appendChild(tbir); tr1.appendChild(toper); var users = document.getElementByIdx_x("users"); users.appendChild(tr1); tusers.appendChild(users); //删除操作 adelete.onclick = function() { users.removeChild(adelete.parentNode.parentNode); } //修改操作 aupdate.onclick = function() { document.getElementByIdx_x("addu").style.display = "none"; document.getElementByIdx_x("addu1").style.display = "block"; var utr = aupdate.parentNode.parentNode; var utrs = utr.childNodes; document.getElementByIdx_x("name").value = utrs[1].innerHTML; document.getElementByIdx_x("sex").value = utrs[2].innerHTML; document.getElementByIdx_x("email").value = utrs[3].innerHTML; document.getElementByIdx_x("bir").value = utrs[4].innerHTML; var upUser = document.getElementByIdx_x("upduser"); upUser.onclick = function() { utr.childNodes[1].innerHTML = document.getElementByIdx_x("name").value; utr.childNodes[2].innerHTML = document.getElementByIdx_x("sex").value; utr.childNodes[3].innerHTML = document.getElementByIdx_x("email").value utr.childNodes[4].innerHTML = document.getElementByIdx_x("bir").value document.getElementByIdx_x("addu1").style.display = "none"; document.getElementByIdx_x("addu").style.display = "block"; } } //当添加用户的时候调用分页技术 testPage()}//定义分页标签节点对象并创建var indexPage = document.createElement_x("a");var upPage = document.createElement_x("a");var downPage = document.createElement_x("a");var endPage = document.createElement_x("a");var nowpage = 1;//分页技术的实现function testPage() { var tbodyUsers = document.getElementByIdx_x("users"); var trUsers = tbodyUsers.getElementsByTagName_r("tr"); //获取总记录数 var countRecord = trUsers.length; //每页显示的记录数 var PAGESIZE = 2; //总页数 var countPage = (countRecord % PAGESIZE == 0 ? countRecord / PAGESIZE : Math.ceil(countRecord / PAGESIZE)); //当前页信息 // =======>从那条记录开始 (nowpage-1)*PAGESIZE; //var nowpage = countPage; //获取创建分页标签的节点对象 var pages = document.getElementByIdx_x("pages"); //如果没有创建分页标签的节点则创建节点对象 if (!pages.hasChildNodes()) { getPages(nowpage); } //当点击首页时的操作 indexPage.onclick = function() { nowpage = 1; //显示首页的记录 indexPageInfo(countRecord, trUsers); } //当点击上一页的操作 upPage.onclick = function() { if (nowpage - 1 > 1) { nowpage -= 1; } else { nowpage = 1; indexPageInfo(countRecord, trUsers); } //显示上一页记录 var startindex = (nowpage - 1) * PAGESIZE; alert(startindex + "====================++++++"); var endindex = startindex + PAGESIZE; PageInfo(startindex, endindex, countRecord, trUsers) } //当点击下一页的操作 downPage.onclick = function() { if (nowpage + 1 >= countPage) { nowpage = countPage; } else { nowpage += 1; } alert(nowpage + "-----------------"); //显示上一页记录 var startindex = (nowpage - 1) * PAGESIZE; alert(startindex + "====================++++++"); var endindex = startindex + PAGESIZE; alert(startindex + "-----" + endindex + "---"); PageInfo(startindex, endindex, countRecord, trUsers) } //当点击最后一页的操作 endPage.onclick = function() { nowpage = countPage; if (nowpage > 1) { var startindex = (nowpage-1)*PAGESIZE; for ( var i = 0; i < countRecord; i++) { if (i < startindex) { trUsers[i].style.display = "none"; } else { trUsers[i].style.display = "block"; } } 第二种：<script language="JavaScript">var totalRecordNum = <%=totalRecordNum%>;//总记录条数(从java程序中获取)var currentPageNumber = 1;//当前页号if(totalRecordNum==0){ currentPageNumber = 0;}var perPageRecordNum = 5;//每页记录条数(js中设置)//计算总页数var totalPageNumber = Math.ceil(totalRecordNum/perPageRecordNum);var startShowPage ;//开始显示页记录号数var endShowPage ;//结束显示页记录号数//回车键和点击"GO"图片的效果一样function keyDown() { if(event.keyCode == 13){ goToPage(); }}//跳到指定页function goToPage(){ if(totalRecordNum != 0) { var pageNo = document.BillQueryForm.pageNum.value; //校验页号 if((/[^0-9]/gi.test(pageNo)) | pageNo.length==0) { alert("页数必须为数字!"); return; } else { if((pageNo > totalPageNumber)|(pageNo<1)) { alert("你所输入的页数超出范围！"); return; } } //跳转到指定页 startShowPage = (pageNo-1)*perPageRecordNum; endShowPage = pageNo*perPageRecordNum; exeShowPage(); currentPageNumber = pageNo; curPageNo.innerHTML = currentPageNumber; totalPageNo.innerHTML = totalPageNumber; }}//跳转到第一页function goToFirstPage(){ if(totalRecordNum != 0) { startShowPage = 0*perPageRecordNum; endShowPage = 1*perPageRecordNum; currentPageNumber = 1; exeShowPage(); curPageNo.innerHTML = currentPageNumber; totalPageNo.innerHTML = totalPageNumber; }}function goToLastPage(){ if(totalRecordNum != 0) { if(totalRecordNum%perPageRecordNum==0)//除尽 { var tempVal = totalRecordNum/perPageRecordNum; startShowPage = (tempVal-1)*perPageRecordNum; endShowPage = tempVal*perPageRecordNum; } else { var tempVal = totalRecordNum%perPageRecordNum;//得到余数,就是最后一页要显示的记录条数 startShowPage = totalRecordNum-tempVal; endShowPage = totalRecordNum; } currentPageNumber=totalPageNumber; exeShowPage(); curPageNo.innerHTML = currentPageNumber; totalPageNo.innerHTML = totalPageNumber; }}function goToNextPage(){ if(totalRecordNum != 0) { if(currentPageNumber< totalPageNumber) { currentPageNumber = Number(currentPageNumber)+1; startShowPage = (currentPageNumber-1)*perPageRecordNum; endShowPage = currentPageNumber*perPageRecordNum; exeShowPage(); curPageNo.innerHTML = currentPageNumber; totalPageNo.innerHTML = totalPageNumber; } else { alert("当前页已经是最后一页了!"); } }}function goToBeforePage(){ if(totalRecordNum != 0) { if(currentPageNumber>1) { currentPageNumber = currentPageNumber-1; startShowPage = (currentPageNumber-1)*perPageRecordNum; endShowPage = currentPageNumber*perPageRecordNum; exeShowPage(); curPageNo.innerHTML = currentPageNumber; totalPageNo.innerHTML = totalPageNumber; } else { alert("当前页已经是第一页了!"); } }}function exeShowPage(){ for(var i = 0; i<totalRecordNum;i++) { if ((i>=startShowPage)&&(i<endShowPage)) { document.getElementByIdx_x("row"+i).style.display=""; } else { document.getElementByIdx_x("row"+i).style.display="none"; } } } function submitQuery() { var sForm = document.JXCardNumQueryForm; if(sForm.elements["jxCardVO.jxcardid"].value==""){ alert("请输入您要查询的卡号！"); sForm.elements["jxCardVO.jxcardid"].focus(); return 0; } if(sForm.elements["jxCardVO.password"].value==""){ alert("请输入您要查询的密码！"); sForm.elements["jxCardVO.password"].focus(); return 0; } sForm.action="jxCardNumQuery.do?type=dxk"; sForm.submit(); return; } function cancelQuery() { window.history.go(-1); } function check() { if(document.all("card_no").value==""){ alert("卡号不能为空，请输入卡号！"); document.all("card_no").focus(); return false; } if(document.all("password").value==""){ alert("密码不能为空!"); document.all("password").focus(); return false; } return true; }//--></script><body onLoad="javascript:goToFirstPage();"> <%if(totalRecordNum!=0) {%> <tr> <td colspan='4' align="right"> 当前第<span id="curPageNo"></span>页/总计<span id="totalPageNo"></span>页 <a onClick="javascript:goToFirstPage();" style="cursor:hand;"><img src="images/page_top.gif" width="9" height="9" border="0">第一页</a> <a onClick="javascript:goToBeforePage();" style="cursor:hand;"><img src="images/page_prev.gif" width="9" height="9" border="0">上一页</a> <a onClick="javascript:goToNextPage();" style="cursor:hand;">下一页<img src="images/page_next.gif" width="9" height="9"></a> <a onClick="javascript:goToLastPage();" style="cursor:hand;">最后一页<img src="images/page_end.gif" width="9" height="9" border="0"></a> <input type="text" id="pageNum" name="pageNum" size="5" onkeydown="javascript:keyDown();"> <input type="button" class="orangebtn_s" value="Go!" onclick="javascript:goToPage();" /> </td> </tr> <%} else{%> <tr> <td colspan='4' align="right"> <span id="curPageNo"></span> <span id="totalPageNo"></span> </td> </tr> <%}%> </logic:present> </table> </td> </tr> </table> </html:form>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 欢迎使用CSDN-markdown编辑器
- Ajax详解
- js制作鼠标移动提示层
- 一段非常简单的让图片自动切换js代码
- JavaScript Core -- 函数详解（作用域&&参数值传递&&this关键字&&函数声明）
- JavaScript 面向对象
- jsp中的js代码调用EL表达式
- Javascript(函数）
- VS中关于JS的调试
- JS基础
- Ajax使用的四大步骤
- JavaScript（五） hasOwnProtype原型链 过滤
- 组合模式
- [Javascript] Querying an Immutable.js Map()
- servlet中filter的的异步问题以及JSP与servlet配合时filter的注意
- js闭包
- javascript于boolean类型转换，运营商&&和|| 返回值
- [Javascript] Modifying an Immutable.js Map()
- 服务器和前台采用JSON通讯
- javascript函数