分页组件简版

hellosnowyy

于 2017-07-23 15:58:53 发布

阅读量282

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/u012212157/article/details/75913255

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

function SplitPage(elementId,pageSize,totalCount,sizeGroup,callBack){
	this.pageSize = pageSize||20;  //每页记录数
	this.totalCount = totalCount;  //总记录数
	this.sizeGroup = sizeGroup || [10,20,50]  //可选择每页记录数
	this.startPage = 1;//首页
	this.endPage = 0;//尾页
	this.currentPage = 0;//当前页
	this.elementObj= document.getElementById(elementId); //分页系统容器
	this.pages = 0; //总页数，计算得到
    this.callBack = callBack; //回调
	var _this = this;
	
	this.init = function(){
		this.pages=Math.ceil(this.totalCount/this.pageSize);
		this.endPage=this.pages;
		this.createPage();
	}
	this.createPage = function(){
		var html="<span>每页显示</span><select class='choosePageSize'>";
		for(var i = 0;i<this.sizeGroup.length;i++){
			if(this.pageSize==this.sizeGroup[i]){
				html+= "<option selected='selected' value='"+this.sizeGroup[i]+"'>"+ this.sizeGroup[i]+"</option>";
			}else{
				html+= "<option value='"+this.sizeGroup[i]+"'>"+ this.sizeGroup[i]+"</option>";
			}
		}
		html+="</select><span>条消息</span>";
		html+="<button class='toStartPage'><<</button><button class='tolaLastPage'><</button><span id="page">"+this.startPage+"</span><button class='toNextPage'>></button><button class='toEndPage'>>></button>"
		
		$(this.elementObj).append(html);
		$(".toStartPage").change(function(){
			_this.callBack();
		})
		
		$(".to").change(function(){
			_this.callBack();
		})
    }		
	
}

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.js"></script>
 <script src="test.js"></script>
 <script>
   var psys;
   window.onload = function() {
    psys = new SplitPage("pageDiv",null ,100, null,showMsg); //总记录数, 分页系统容器，每组10页,回调0
    psys.init();
  }
  
  function showMsg() {
    //回调方法自定义，两个参数，第一个为当前页，第二个为每页记录数
    /****************将currentPage和pageSize请求数据更新列表,最好使用ajax技术******************/
    alert(1111);
  }
  </script>
  <style>
    #pageDiv{
      font-size:13px;
    }
  </style>
</head>
<body>
  <div id="pageDiv">
  </div>
  <br/><br/>
</body>
</html>