分享一个自己写的简单的javascript分页组件_javascript技巧

顺亿

2026-10-27 • 👁 0人浏览过

自己写的一个简单的分页组件,主要功能还有实现都在js中,html页面中只用增加一个放置生成分页的div,并给定容器的id.

html结构如下:复制代码代码如下:class="pagination" 给定了分页的样式,id="pageDIV"用于放置JS生成的分页CSS结构如下:复制代码代码如下:.pagination{margin-top: 10px;margin-bottom: 10px;display: inline-block;padding-left: 0;margin: 20px 0;border-radius: 4px;}.pagination>li {display: inline;}.pagination>li:first-child>a{margin-left: 0;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}.pagination>li>a{position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;text-decoration: none;background-color: #fff;border: 1px solid #ddd;cursor: pointer;}.pagination>li>a.navcur{background: #cccccc;color: #ffffff;}下面是JS结构,注意要引用JQuery复制代码代码如下:/*** @pageContentID 渲染分页的DIV元素* @curPage 当前开始页* @totalCount 总数量* @pageRows 每页显示数量* @callback 显示数据的回调函数*/ function PageList(pageContentID,option){this.pageContentID=document.getElementById(pageContentID);this.curPage=option.curPage;this.totalCount=option.totalCount;this.pageRows=option.pageRows;this.callback=option.callback;this.pageSize=Math.ceil(this.totalCount/this.pageRows);}PageList.prototype={init:function(){this.renderbtn();},firstpage:function(){var _self=this;_self._firstpage=document.createElement("li");_self._firstpageA=document.createElement("a");_self._firstpageA.innerHTML="首页";_self._firstpage.appendChild(_self._firstpageA);this.pageContentID.appendChild(_self._firstpage);_self._firstpage.onclick=function(){_self.gotopage(1);}},lastpage: function () {var _self=this;_self._lastpage=document.createElement("li");_self._lastpageA=document.createElement("a");_self._lastpageA.innerHTML="尾页";_self._lastpage.appendChild(_self._lastpageA);this.pageContentID.appendChild(_self._lastpage);_self._lastpage.onclick= function () {_self.gotopage(_self.pageSize);}},prewpage: function () {var _self=this;_self._prew=document.createElement("li");_self._prewA=document.createElement("a");_self._prewA.innerHTML="_self._prew.appendChild(_self._prewA);this.pageContentID.appendChild(_self._prew);_self._prew.onclick= function () {if(_self.curPage>1){_self.curPage--;}_self.callback.call(this,this.curPage);_self.init();console.log(_self.curPage);}},nextpage: function () {var _self=this;_self._next=document.createElement("li");_self._nextA=document.createElement("a");_self._nextA.innerHTML=">>";_self._next.appendChild(_self._nextA);this.pageContentID.appendChild(_self._next);_self._next.onclick= function () {if(_self.curPage_self.curPage++;}_self.callback.call(this,this.curPage);_self.init();console.log(_self.curPage);}},pagenum: function () {var _self=this;if(this.pageSize for(var i= 1,len=this.pageSize;i_self._num=document.createElement("li");_self._numA=document.createElement("a");_self._numA.innerHTML=i;_self._num.appendChild(_self._numA);this.pageContentID.appendChild(_self._num);_self._num.onclick= function () {var curpage = $(this).text();_self.gotopage(curpage);}}}else{if(_self.curPage for(var i= 1;i_self._num=document.createElement("li");_self._numA=document.createElement("a");_self._numA.innerHTML=i;_self._num.appendChild(_self._numA);this.pageContentID.appendChild(_self._num);_self._num.onclick= function () {var curpage = $(this).text();_self.gotopage(curpage);}}}else if(_self.curPage>10&&_self.curPage if(this.pageSize for(var i=Math.floor(_self.curPage/10)*10+1;i if(_self.curPage>this.pageSize) return;_self._num=document.createElement("li");_self._numA=document.createElement("a");_self._numA.innerHTML=i;_self._num.appendChild(_self._numA);this.pageContentID.appendChild(_self._num);_self._num.onclick= function () {var curpage = $(this).text();_self.gotopage(curpage);}}}else{if(Math.ceil(_self.curPage/10)*10==_self.curPage){for(var i=_self.curPage-9;i_self._num=document.createElement("li");_self._numA=document.createElement("a");_self._numA.innerHTML=i;_self._num.appendChild(_self._numA);this.pageContentID.appendChild(_self._num);_self._num.onclick= function () {var curpage = $(this).text();_self.gotopage(curpage);}}}else{for(var i=Math.floor(_self.curPage/10)*10+1;i_self._num=document.createElement("li");_self._numA=document.createElement("a");_self._numA.innerHTML=i;_self._num.appendChild(_self._numA);this.pageContentID.appendChild(_self._num);_self._num.onclick= function () {var curpage = $(this).text();_self.gotopage(curpage);}}}}}}$(".pagination li").each(function(){if($(this)[0].innerText==_self.curPage){$(".pagination li").children("a").removeClass("navcur");$(this).children("a").addClass("navcur");}});},gotopage: function (curpage) {this.curPage=curpage;this.callback.call(this,this.curPage);this.init();console.log(this.curPage);},renderbtn: function () {$(".pagination").html("");this.firstpage();this.prewpage();this.pagenum();this.nextpage();this.lastpage();}};$(function(){var pager = new PageList("pageDIV",{curPage:1,totalCount:26,pageRows:1,callback:callbackFuc});pager.init();});function callbackFuc(curpage){}说明:使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载立即学习“Java免费学习笔记（深入）

”；

此分页是以10页为标准,低于10页的时候全部显示,大于10页的时候,进行翻页显示余下页数.

调用方法:复制代码代码如下:$(function(){var pager = new PageList("pageDIV",{curPage:1,totalCount:26,pageRows:1,callback:callbackFuc});pager.init();});以上就是本分页组件的核心代码了，希望小伙伴们能够喜欢。

相关文章