本篇文章给大家带来的内容是关于原生js实现可以带上下翻页的翻页功能（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
翻页功能在渲染数据时经常用到，下面是使用原生js去实现的一个翻页功能，带上下翻页功能，效果图如下：
主要步骤/思路：实现页面效果；
点击页码时，根据情况判断，控制翻页变化，有以下几种情况：
      （a）.总页数 > 限制页数  =》有10页，限制每次只显示5页
      （a）.总页数 = 限制页数  =》只返回1页，显示每次只显示5页
      （a）.总页数 < 限制页数  =》返回的总页数和每次显示的页数是相同的
    3. 上下翻页功能，根据翻页情况，第一页和最后一页时，应该移除翻页的功能等；
页面效果实现：html
<div class="pagination"> <a href="javascript:;" class="page-pre">上一页</a> <ul></ul> <a href="javascript:;" class="page-next">下一页</a></div>
css
/** 分页 */.pagination{ display: inline-block;}.pagination>ul{ padding: 0; margin: 0; display: inline-block; border: 1px solid #e2e2e2;}.pagination>ul>li{ float: left; border-right-width: 1px; border-right-style: solid; border-right-color: #e2e2e2;}.pagination>ul>li:first-child{ background-color: rgb(30, 159, 255);}.pagination>ul>li:last-child{ border-right-width: 0px;}.pagination>ul>li>a{ display: inline-block; width: 38px; height: 30px; line-height: 30px; text-align: center; color: #333;}.pagination>ul>li>a:hover{ opacity: 0.7;}.pagination>a{ display: inline-block; width: 50px; height: 30px; line-height: 30px; text-align: center; color: #333; border: 1px solid #e2e2e2;}.pagination a.page-pre{ margin-right: -1px; float: left; color: #d2d2d2; cursor: not-allowed; border-right-width: 0px; }.pagination a.page-next{ float: right; border-left-width: 0px;}/* 分页 end **/
实现翻页效果var pagination = function (o){ /** * 翻页会出现的情况： * 总页数 > 限制页数 30 > 10 * 总页数 < 限制页数 5 < 10 * 总页数 = 限制页数 10 = 10 * @var pncount - 显示多少页码 => 限制显示页码 < 页码总数 （按限制显示） ： 限制显示页码 > 页码总数 （按页码总数显示） * @var midn - 翻页的中间页码位置 * */ var config = { count: o.count || 10, limit: o.limit || 5, //每页显示的条数 }; var count = config.count, limit = config.limit, eul = dorea(".pagination ul")[0], epre = dorea(".pagination .page-pre")[0], enext = dorea(".pagination .page-next")[0], eulchild = eul.children, pncount = limit < count ? pncount = limit : pncount = count, midn = math.ceil( pncount / 2 ); /* 初始化上下翻页的页码 */ epre.setattribute("data-page","1"); enext.setattribute("data-page","1"); /* * @func renderpag * @desc 渲染分页 * @param { string } startn - 页码起始数 * @param { string } currp - 当前页数 ，初始化该函数时可不传 * @var childlen - 所有的子元素（页码）的长度 */ var renderpag = function (startn,currp){ var childlen = eulchild.length; /* 渲染前先清空所有页码 */ for ( var d = childlen-1; d>=0; d-- ) { eulchild[d].parentnode.removechild(eulchild[d]); } /* 渲染页码 */ for ( var i = startn; i <pncount+startn; i++ ) { var eli = createle("li"), ea = createle("a"); ea.innerhtml = i; ea.setattribute("href","javascript:;"); eli.setattribute("data-page",i); eli.appendchild(ea); eul.appendchild(eli); /* 添加页码的点击事件，获取当前页码currpage */ eli.addeventlistener("click",function (){ var currpage = this.getattribute("data-page"); turnpag(currpage); epre.setattribute("data-page",currpage); enext.setattribute("data-page",currpage); }); } /* 每次重新渲染翻页时，判断当前页情况（是否属于首页和尾页） */ if (currp!==undefined) { if (currp=="1") { epre.style.color = "#d2d2d2"; epre.style.cursor = "not-allowed"; epre.removeeventlistener("click",prefn,false); }else if(currp==count){ enext.style.color = "#d2d2d2"; enext.style.cursor = "not-allowed"; enext.removeeventlistener("click",nextfn,false); }else{ epre.style.color = "#333"; epre.style.cursor = "pointer"; enext.style.color = "#333"; enext.style.cursor = "pointer"; epre.addeventlistener("click",prefn,false); enext.addeventlistener("click",nextfn,false); } } }; /** * @func turnpag * @desc 翻页事件判断，主要用于点击事件发生后，进行页码渲染前的判断 * @param { string } cp - 传入一个点击所获得的当前页数 * 情况：1) count > limit * a). limit的前半部分页码，例如 10,5 ，前半部分是 1,2 => 起始页为 1 * b). limit的后半部分页码，例如 10,5 ，后半部分是 9,10 => 起始页为 (count-limit)+1 * b). limit的中间部分，例如 10,5 ，中间部分是 4-7 => 起始页为 (当前页 - (limit/2))+1 * 情况：2) count = limit => 起始页为 1 * 情况：3) count < limit => 限制10条，但真实数据确只有5条 * a). 发生这类情况，限制条数应以总数据条数为准则 * */ var turnpag = function (cp){ console.log("当前第 "+cp+" 页"); if (count>limit) { if ( cp<=midn ) { //判断是否属于前部分 renderpag(1,cp); }else if( cp<=count && cp>count - midn ){ //判断是否属于后部分 renderpag( (count - limit)+1 ,cp) ; }else{ renderpag( (cp-midn)+1 ,cp); } }else if (count===limit || count<limit) { renderpag(1); }else{ renderpag( (count - midn)-1 ,cp); } for (var i = 0; i<eulchild.length; i++) { eulchild[i].style.backgroundcolor = "#fff"; if (eulchild[i].getattribute("data-page") == cp) { eulchild[i].style.backgroundcolor = "#1e9fff"; /* 选中状态 */ } } }; /** * @func prefn * @desc 上翻页 * @func nextfn * @desc 下翻页 */ var prefn = function (){ var currpage = this.getattribute("data-page"); currpage--; turnpag(currpage); epre.setattribute("data-page",currpage); enext.setattribute("data-page",currpage); }; var nextfn = function (){ var currpage = this.getattribute("data-page"); currpage++; turnpag(currpage); epre.setattribute("data-page",currpage); enext.setattribute("data-page",currpage); }; renderpag(1); /* * 初次渲染翻页时，判断当前的总页数情况，初始化翻页功能 * 情况： 1) count > limit 上翻页：暗色，删除事件 - 下翻页：亮色，点击事件 * 情况： 2) count = limit 上下翻页：暗色，删除事件 * 情况： 3) count < limit 上下翻页：暗色，删除事件 */ if (count>limit) { epre.style.color = "#d2d2d2"; epre.style.cursor = "not-allowed"; epre.removeeventlistener("click",prefn,false); enext.addeventlistener("click",nextfn,false); }else{ epre.style.color = "#d2d2d2"; epre.style.cursor = "not-allowed"; epre.removeeventlistener("click",prefn,false); enext.style.color = "#d2d2d2"; enext.style.cursor = "not-allowed"; enext.removeeventlistener("click",nextfn,false); }}
相关推荐：
原生js如何实现翻页功能
js 拖拽翻页实现代码_javascript技巧
js实现网页键盘控制翻页的方法_javascript技巧
以上就是原生js实现可以带上下翻页的翻页功能（代码）的详细内容。