原生js实现分页的效果

想必大家都用过百度查找过我们想要的信息，每次我们查找东西的时候，百度都会返给我们很多很多相似和有关的结果，而这些结果是不可能一页就显示完全的，一般都会分很多很多页，效果图如下。所以我们今天就是要分享一下，这个分页效果是怎么实现的。

首先我们观察这个分页

一页中显示的页码数是固定的
当当期页码大于等于2的时候，开始显示‘上一页’按钮，当总页数比当前显示的页码大于等于1的时候，开始显示'下一页'按钮的按钮
如果我们想要添加‘首页’和‘尾页’按钮的话，那当首页不能在页面显示的时候，添加‘首页’按钮。如果尾页不能显示在页面的时候添加‘尾页’按钮。
上面的情况确定之后，就是要进行细分的了，分情况进行讨论。首先我们分两大种情况：当页面显示的页数大于等于总页数的时候以及当页面显示的页数小于总页数的时候两种情况。前一种情况比较简单，就不再细说了，主要是当总页数比页面能显示的页数大的时候还要分三种情况：1、当前页的页码小于等于页面中能显示页数的二分之一时2、当前页为最后的几页的时候，以及除了上面两种情况的其他的情况。

文字描述可能有点难懂，所以接下来我们直接上例子，js中有详细的注释方便理解（首先说明，页面中显示的页数为5，至于有多少页如果在实际项目中应该是通过ajax动态获取数据的，然后根据数据的多少自动获得总页数。为了方便理解这里我是用的模拟数据）

HTML代码：

<ul id="ul1"></ul>
<div id="div1"><!--<a href="#1">首页</a><a href="#3">上一页</a><a href="#2">[2]</a><a href="#3">[3]</a><a href="#4">4</a><a href="#5">[5]</a><a href="#6">[6]</a><a href="#5">下一页</a><a href="#10">尾页</a>-->
</div>

注释的部分是我们要通过js动态添加的。

CSS代码：

    <style>*{ margin:0; padding:0;}li{ list-style:none;}#ul1{ width:600px; height:250px;}#ul1 li{ width:100px; height:100px; background:red; float:left; overflow:hidden; margin:10px;}a{ margin:5px;}</style>

js代码：

    var json = {title : ['效果1','效果2','效果3','效果4','效果5','效果6','效果7','效果8','效果9','效果10','效果11','效果12','效果13','效果14','效果15','效果16','效果17','效果18','效果19','效果20','效果21','效果22','效果23','效果24','效果25','效果26','效果27','效果28','效果29','效果30','效果31','效果32','效果33','效果34','效果35','效果36','效果37','效果38','效果39','效果40','效果41','效果42','效果43','效果44','效果45','效果46','效果47','效果48','效果49','效果50','效果51']};

    var arr=[];var iNow = 9;page({id:'div1',nowNum:1,allNum:Math.floor(json.title.length/10),callBack:function(){alert(0)}});function page(opt){if(!opt.id){return false;}var obj = document.getElementById(opt.id);var nowNum = opt.nowNum||1;var allNum = opt.allNum||5;var callBack = opt.callBack||function(){};if(nowNum>=4&&allNum>=6){//首页出现的情况，就是当现在的页码大于等于4并且总页码大于等于6时var oA = document.createElement('a');oA.href = '#1';oA.innerHTML = '首页';obj.appendChild(oA);}if(nowNum>=2){//只要页码大于等于2就会出现上一页var oA = document.createElement('a');oA.href = '#'+(nowNum - 1);oA.innerHTML = '上一页';obj.appendChild(oA);}if(allNum<=5){//因为我们让一页最多显示5个页码，所以，如果总页码小与等于5，就说明页码可以显示完全for(var i=1;i<=allNum;i++){var oA = document.createElement('a');oA.href = '#'+i;if(nowNum==i){oA.innerHTML = i;}else{oA.innerHTML = '['+i+']';}obj.appendChild(oA);}}else{//下面的情况是当总页码大于5的时候进行的分类for(var i=1; i<=5;i++){var oA = document.createElement('a');if(nowNum == 1||nowNum==2){//在总页数大于5的情况下继续根据当前页进行细分。如果当前的页为1或者为2的时候oA.href = '#'+i;if(nowNum ==i){oA.innerHTML = i;}else{oA.innerHTML = '['+i+']'}}else if((allNum - nowNum)==0||(allNum - nowNum)==1){//如果当前页为最后一页或者倒数第二页的时候，说明显示的5页即为最后5页，所以就是下面的公式oA.href = '#'+(allNum - 5+i);if((allNum - nowNum)==0&&i==5){oA.innerHTML = (allNum - 5 + i);}else if((allNum - nowNum)==1&&i==4){oA.innerHTML = (allNum - 5 +i);}else{oA.innerHTML = '['+(allNum - 5 +i)+']'}}else{//当前页码处在5个页码的中间的时候oA.href = '#'+(nowNum - 3 +i);if(i==3){oA.innerHTML = (nowNum - 3 + i);}else{oA.innerHTML = '['+(nowNum - 3 +i)+']'}}obj.appendChild(oA);}}if((allNum - nowNum)>=1){//如果总页数比当前页码大于等于1的时候显示‘下一页’var oA = document.createElement('a');oA.href = '#'+(nowNum+1);oA.innerHTML = '下一页';obj.appendChild(oA);}if((allNum - nowNum)>=3&&allNum>=6){//如果总页数比当前页码大于等于3并且总页码大于等于6的时候显示‘尾页’；var oA = document.createElement('a');oA.href = '#'+allNum;oA.innerHTML = '尾页';obj.appendChild(oA);}callBack(nowNum,allNum);var aA = obj.getElementsByTagName('a');for(var i=0; i<aA.length;i++){aA[i].onclick = function(){var nowNum = parseInt(this.getAttribute('href').substring(1));//得到当前的页码数obj.innerHTML = '';page({id : opt.id,nowNum : nowNum,allNum : allNum,callBack : callBack});return false;}}}

原生js实现分页的效果相关推荐

原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
原生JS实现分页效果
做开发久了,会越来越依赖框架,毕竟利用框架可以快速的完成工作任务,如常见的分页效果,只需要与后端配合,由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能,就可以轻松的实现分页效果,那如果在不 ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
react中react-custom-scrollbars返回顶部功能，如何使其有平滑动画效果；原生js scroll平滑动画效果
1.Scrollbars是react-custom-scrollbars插件暴露出来的组件 scrollRef.current.view.scroll({top: 0,left: 0,behavior ...
原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...
用原生js实现刮奖效果
用原生js实现简单的刮奖效果效果图分析:这是运用canvas来做的,页面结构为一个canvas和一张图片.canvas在最上层,图片在最下层.canvas与图片宽高一致.首先在canvas上填充灰 ...
原生JS实现瀑布流效果
前两天通过B站在极客学院学习了JS动态瀑布流效果:主要是HTML+CSS控制样式,通过JS实现全局瀑布流样式,以及通过访问自定义的JSON字符串,实现图片无限加载:现对其代码进行整理,供日后学习参考. ...
原生js实现跑马灯效果，鼠标放下可以停止跑动
js原生代码跑马灯效果纯js代码如下: 1.首先html的内容(里面图片自己可以换,li里面也可以填文字) <div> <ul><li>呵呵呵呵呵3</li& ...

原生js实现分页的效果

原生js实现分页的效果相关推荐

最新文章

热门文章