js中的分页
Posted 阿弥陀佛么么哒！
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中的分页相关的知识，希望对你有一定的参考价值。
分页是前端经常会用到的一个非常实用的一个知识点，今天闲来没事，做了一个小demo，虽然样子，比较丑，哈哈哈，但是这是分页的核心思想都在，希望能给某个小伙伴一些启发。可直接复制在编辑器中运行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> a{ margin:5px; } </style> </head> <body> <div id="div1"> </div> </body> <script> //采用组件的写法 page({ id:‘div1‘, nowNum:10, //当前的页码 allNum:10, //总共的页码 callBack:function(now,all){ alert(‘当前页：‘+now+‘总共页：‘+all); } }) 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){ var oA = document.createElement(‘a‘); oA.href = ‘#1‘; oA.innerHTML = ‘首页‘; obj.appendChild(oA); } //上一页 if(nowNum>=2){ var oA = document.createElement(‘a‘); oA.href = ‘#‘+(nowNum-1); oA.innerHTML = ‘上一页‘; obj.appendChild(oA); } //当总页数小于等于5页的情况 if(allNum<=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){ //对当前页是第一页和第二页的时候做一个特殊处理 oA.href = ‘#‘+ i; if(nowNum == i){ oA.innerHTML = i; }else{ oA.innerHTML = ‘[‘ + i + ‘]‘; } }else if((allNum-nowNum) == 0 || (allNum-nowNum) == 1){ //最后两个页码做特殊处理 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{ 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){ var oA = document.createElement(‘a‘); oA.href = ‘#‘+(nowNum+1); oA.innerHTML = ‘下一页‘; obj.appendChild(oA); } //尾页 if((allNum-nowNum)>=3 && allNum>=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)) //注意这里获取href的时候不要用this.href，因为这样获取到的是一个绝对地址,要用getAttribute //获取到此刻的页码，重新渲染 obj.innerHTML = ‘‘; //清空 page({ id:opt.id, nowNum:nowNum, allNum:allNum, callBack:callBack }); return false; //阻止默认事件 } } } </script> </html>
以上是关于js中的分页的主要内容，如果未能解决你的问题，请参考以下文章
怎么用js来实现页面的分页，有案列代码吗？请给个代码看看，谢谢
不断收到 DiscordAPIError：在 Discord.js 中的音乐机器人上使用 reconlx 的分页执行队列命令时出现未知交互