<html> <head> <title>数据分页</title> <meta http-equiv="content-Type" content="text/html; charset=gb2312"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="标签页示例"> <mce:style><!-- .pageSpan { border:1px solid #1867a6; padding-left:5px; padding-right:5px; cursor:hand; height: 20px; } .pageInput { border:1px solid #1867a6; padding-left:2px; padding-right:2px; width: 30px; } .pageSpan1 { font-size: 14px; cursor:hand; } --></mce:style><style mce_bogus="1"> .pageSpan { border:1px solid #1867a6; padding-left:5px; padding-right:5px; cursor:hand; height: 20px; } .pageInput { border:1px solid #1867a6; padding-left:2px; padding-right:2px; width: 30px; } .pageSpan1 { font-size: 14px; cursor:hand; } </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no" οnlοad="onpageload();"> <table width="100%" hight="100%"> <tr> <td width="100%"><div id="pageDiv" style="width: 100%;height: 30"></div></td> </tr> </table> </body> <mce:script type="text/javascript"><!-- var pageRows = 10; function onpageload() { pc1=new pageControl("","pageDiv",10,20,loadDataByPage); } function loadDataByPage() { var startRow=1,rowsCount=pageRows; if(pc1.pageRows&&pc1.currentPage) { startRow=pc1.pageRows*(pc1.currentPage-1)+1*1; rowsCount=pc1.pageRows; } alert("startRow:"+startRow+" rowsCount:"+rowsCount); } // --></mce:script> <mce:script type="text/javascript"><!-- //以下JS方法可提出公用 function pageControl(imagesPath,pageC,pageRows,rowsCount,callBackF) { this.pageCount=parseInt(rowsCount/pageRows)+1; this.currentPage=1; this.pageRows=pageRows; this.callBack=callBackF; this.rowsCount=rowsCount; var table=document.createElement("table"); table.className="extTable" table.width='100%'; table.height=20; var tr=table.insertRow(); tr.width="100%"; var td=tr.insertCell(); td.align="center"; td.style.width="100%"; var span=document.createElement("span"); span.innerText="首页" span.title="首页"; span.className="pageSpan"; var self=this; span.οnclick=function (){self.gotoFirstPage();} td.appendChild(span); self.pageControlInertEmpty(td); span=document.createElement("span"); span.innerText="上一页"; span.title="上一页"; span.className="pageSpan"; span.οnclick=function (){self.gotoPrevPage();} td.appendChild(span); self.pageControlInertEmpty(td); span=document.createElement("span"); span.innerText="下一页"; span.title="下一页"; span.className="pageSpan"; span.οnclick=function (){self.gotoNextPage();} td.appendChild(span); self.pageControlInertEmpty(td); span=document.createElement("span"); span.innerText="末页"; span.title="末页"; span.className="pageSpan"; span.οnclick=function (){self.gotoLastPage();} td.appendChild(span); self.pageControlInertEmpty(td); span=document.createElement("span"); span.innerText="转到"; span.title="转到"; td.appendChild(span); var input=document.createElement("input"); input.type="text"; input.className="pageInput"; input.value=this.currentPage; input.οnkeydοwn=function (){self.gotoDefinePage(input);}; input.id="gridPageNumber"; td.appendChild(input); this.spanTotalPage=document.createElement("span"); this.spanTotalPage.innerHTML="页/"+this.pageCount; this.spanTotalPage.style.width=40; td.appendChild(this.spanTotalPage); span=document.createElement("span"); span.innerText="Go"; span.title="转到"; span.className="pageSpan1"; span.οnclick=function (){self.gotoDefinePage(input);}; td.appendChild(span); c=document.getElementById(pageC); c.appendChild(table); }; pageControl.prototype.pageControlInertEmpty=function (parentObj) { var span=document.createElement("span"); span.innerText=" " parentObj.appendChild(span); } pageControl.prototype.gotoFirstPage=function(){ this.currentPage=1; this.gotoPage(); }; pageControl.prototype.gotoPrevPage=function(){ if(this.currentPage<=1) { this.currentPage=1; } else { this.currentPage=this.currentPage-1; } this.gotoPage(); } pageControl.prototype.gotoNextPage=function(){ if(this.currentPage>=this.pageCount) { this.currentPage=this.pageCount; } else { this.currentPage=this.currentPage+1; } this.gotoPage(); } pageControl.prototype.gotoLastPage=function(){ this.currentPage=this.pageCount; this.gotoPage(); } pageControl.prototype.gotoPage=function(){ if(this.currentPage<=1) { this.currentPage=1; } if(this.currentPage>=this.pageCount) { this.currentPage=this.pageCount; } var obj=document.getElementById("gridPageNumber"); obj.value=this.currentPage; this.callBack(this.currentPage,this.pageRows); } pageControl.prototype.gotoDefinePage=function(obj){ if(event.keyCode==13) { var currentPage=obj.value; if(currentPage) { if(isNaN(currentPage) == true) { alert("请正确输入您所要查询的页数!"); return; } else { this.currentPage=currentPage; this.gotoPage() } } } } pageControl.prototype.selectOnChange=function(obj){ this.currentPage=1; this.pageRows=obj.value; this.pageCount=parseInt(this.rowsCount/this.pageRows)+1; this.callBack(this.currentPage,this.pageRows); this.changeTotalCount(); } pageControl.prototype.changeTotalCount=function() { if(this.rowsCount!=0) { this.pageCount=parseInt(this.rowsCount/this.pageRows)+1; } else { this.pageCount=0; } this.currentPage=0; //this.spanTotalRows.innerText="共有数据 "+this.rowsCount; this.spanTotalPage.innerHTML="页/"+this.pageCount; this.gotoPage(); } // --></mce:script> </html>
本文介绍了一种基于JavaScript实现的网页数据分页方法，通过自定义的pageControl类来控制页面导航，包括首页、上一页、下一页和末页等功能，并提供跳转至指定页的功能。
扫一扫
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
