原生JS实现数据分页,多种模式
可实现两种模式:
模式一:通过js跳转分页,适合用于ajax处理分页数据获取;
模式二:通过绑定url参数,实现直接的a标签跳转。
<style> .pages{} .sevstudio_page{ display:inline-block;} .sevstudio_page a{ display:inline-block; font-size:13px; color:#333333; line-height:1em; padding:4px 6px; border:1px solid #ccc; margin:0 3px; cursor:default; text-decoration:none; user-select:none; } .sevstudio_page a.total,.sevstudio_page a.current{ border-color:#ffffff; font-weight:bold; } </style> <body> <div id='pages1' class='pages'></div> <div id='pages2' class='pages'></div> <textarea id='msg' style='width:200px; height:100px;'></textarea> <script> (function(){ sevstudio_pager_v2.prototype = { elem : '',//ID元素,不带#号 count : 0, //记录数量 limit : 10, //分页数量 range : 3, //分页宽度 page : 1, //当前分页 first : '首页', last : '尾页', href : false,// true表示通过url跳转,否则可以使用回调函数处理 param_page : 'p', //分页参数 param : {}, //其他url参数 totalpages : 1, //总页数 init : function(){ this.totalpages = Math.ceil(this.count / this.limit); this.page = this.page < 1 ? 1 : this.page; this.page = this.page > this.totalpages ? this.totalpages : this.page; var ems = []; ems.push("<a class='total'>共"+this.count+"条记录</a>"); var startpage = this.page-this.range>0?this.page-this.range:1; var endpage = this.page+this.range<this.totalpages?this.page+this.range:this.totalpages; if(startpage > 1){ var url = this.getparam(); url = url == '' ? '' : ' href="?'+url+'&'+this.param_page+'=1"'; ems.push("<a class='number'"+url+" data-page='1'>"+this.first+"</a>"); } for(var i=startpage;i<this.page;i++){ var url = this.getparam(); url = url == '' ? '' : ' href="?'+url+'&'+this.param_page+'='+i+'"'; ems.push("<a class='number' "+url+" data-page='"+i+"'>"+i+"</a>"); } ems.push("<a class='current'>"+this.page+"</a>"); for(var i=this.page+1;i<=endpage;i++){ var url = this.getparam(); url = url == '' ? '' : ' href="?'+url+'&'+this.param_page+'='+i+'"'; ems.push("<a class='number' "+url+" data-page='"+i+"'>"+i+"</a>"); } if(endpage < this.totalpages){ var url = this.getparam(); url = url == '' ? '' : ' href="?'+url+'&'+this.param_page+'='+this.totalpages+'"'; ems.push("<a class='number' "+url+" data-page='"+this.totalpages+"'>"+this.last+"</a>"); } ems.push("<a class='total'>共"+this.totalpages+"页,"+this.limit+"条/页</a>"); var html = "<div class='sevstudio_page'>"+ems.join('')+"</div>"; if(document.getElementById(this.elem)){ document.getElementById(this.elem).innerHTML = html; if(this.jump != null){ var pager = document.getElementById(this.elem); var aArr = pager.getElementsByTagName('a'); var _self = this; for(var i=0;i<aArr.length;i++){ if(aArr[i].className.indexOf('number') == -1){ continue; } aArr[i].onclick = function(){ var newpage = this.getAttribute('data-page'); _self.jump(newpage); return _self.href; } } } }else{ //console.log('element not exists'); } }, getparam : function(){ var str = []; for(var item in this.param){ str.push(item+"="+this.param[item]); } return str.join('&'); }, jump : null }; function sevstudio_pager_v2(pm){ if(typeof(pm.elem) != 'undefined'){ this.elem = pm.elem; } if(typeof(pm.count) != 'undefined'){ this.count = pm.count; } if(typeof(pm.limit) != 'undefined'){ this.limit = pm.limit; } if(typeof(pm.range) != 'undefined'){ this.range = pm.range; } if(typeof(pm.page) != 'undefined'){ this.page = pm.page; } if(typeof(pm.jump) != 'undefined'){ this.jump = pm.jump; } if(typeof(pm.href) != 'undefined'){ this.href = pm.href; } if(typeof(pm.param_page) != 'undefined'){ this.param_page = pm.param_page; } if(typeof(pm.param) != 'undefined'){ this.param = pm.param; } this.init(); } window.sevstudio_page = sevstudio_pager_v2; }(window,document)); //模式1,js跳转 new sevstudio_page({ 'elem' : 'pages1', 'count' : 70, 'limit' : 8, 'page' : 5, 'jump' : function(page){ document.getElementById('msg').value += "新分页:"+page+"\n"; } }); //模式2,url跳转 new sevstudio_page({ 'elem' : 'pages2', 'count' : 100, 'limit' : 10, 'page' : 4, 'range' : 4, 'jump' : function(page){ document.getElementById('msg').value += "新分页:"+page+"\n"; }, 'href' : true, 'param' : { 'class_id' : 1, 'status' : 0 } }); </script>
效果演示