分页组件简版

来源：互联网发布：mac共享设置编辑：程序博客网时间：2024/05/17 22:02

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>

阅读全文

0 0