新版请点击此处>>

原生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>

效果演示

bbbb.JPG