超简单的羽量级前端分页组件

开门见山

效果:

非常简单,只需要三部:
1.引入page.js和page.css
2.定义一个分页的容器.
3.调用 page.init() 函数初始化分页组件,并在请求成功后塞入总页数
参数1: 容器的ID
参数2: 分页的查询函数

<!-- 分页容器 -->
<div class="page" id="pageContainer"></div>
<script>
	// init方法执行前,可以设置分页信息
	// page.setPageSizeArray([50,100]);
    page.init("pageContainer", list);
    function list() {
    	//通过工具类获得翻页信息
        let pageNum = page.getPageNum();
        let pageSize = page.getPageSize();
        ...
    	$.ajax({
    		...
            success: function (result) {
            	...
            	//请求成功后,要把总页数塞入工具类里
     			page.setPageCount(result.pageCount);
            }
        })    
    }

以下是分页组件源码

page.js

	var page = {
	    init: function (containerId, listFun) {
	        let html = [];
	        html.push("<div>");
	
	        html.push("<button type='button' onClick='page.goToPage(1)'>首 页</button>");
	        html.push("<button type='button' onClick='page.goPage(-1)'>上 一 页</button>");
	
	        html.push("<select id='pageSize' οnchange='page.setPageSize(this.value);page.list()'>");
	        for (let i = 0, len = this.pageSizeArray.length; i < len; i++) {
	            html.push("<option>");
	            html.push(this.pageSizeArray[i]);
	            html.push("</option>");
	        }
	        html.push("</select>");
	
	        html.push("<span> 共 <span id='pageCount'>1</span> 页,第 </span>");
	        html.push("<input type='hidden' id='pageNumHidden' value='1' />");
	        html.push("<input id='pageNum' value='1' onInput='value=value.replace(/[^\\d]/g,\"\")' maxLength='5'/>");
	        html.push("<span> 页. </span>");
	        html.push("<button type='button' style='width: 40px' onClick='page.goToPage(document.getElementById(\"pageNum\").value)'>GO</button>");
	        html.push("<button type='button' onClick='page.goPage(1)'>下 一 页</button>");
	        html.push("<button type='button' onClick='page.goToPage(document.getElementById(\"pageCount\").innerText)'>尾 页</button>");
	        html.push("</div>");
	        document.getElementById(containerId).innerHTML = html.join("");
	        this.list = listFun;
	        listFun();
	    },
	    list: {},
	    goPage: function (num) {
	        let pageNumHiddenDom = document.getElementById("pageNumHidden");
	        let pageNumHidden = pageNumHiddenDom.value;
	        pageNumHidden = Number(pageNumHidden) + Number(num);
	        if (!this.checkPage(pageNumHidden)) {
	            return;
	        }
	        pageNumHiddenDom.value = pageNumHidden,
	            document.getElementById("pageNum").value = pageNumHidden;
	        this.list();
	    },
	    goToPage: function (pageNum) {
	        if (!this.isNumber(pageNum)) {
	            alert("请不要侮辱数字");
	            return;
	        }
	        if (!this.checkPage(pageNum)) {
	            alert("请输入合适的页码");
	            return;
	        }
	
	        let pageNumHiddenDom = document.getElementById("pageNumHidden");
	
	        if (pageNumHiddenDom.value == pageNum) {
	            return;
	        }
	        document.getElementById("pageNum").value = pageNum;
	        pageNumHiddenDom.value = pageNum
	        this.list();
	    },
	    checkPage: function (pageNum) {
	        if (pageNum < 1) {
	            return false;
	        }
	        let pageCount = document.getElementById("pageCount").innerText;
	
	        if (pageNum > Number(pageCount)) {
	            return false;
	        }
	        return true;
	    },
	    isNumber: function (value) {
	        if (isNaN(value)) {
	            return false;
	        }
	        let reg = /^[0-9]+.?[0-9]*$/;
	        return reg.test(value)
	    },
	    getPageNum: function () {
	        return document.getElementById("pageNum").value;
	    },
	    setPageCount: function (pageCount) {
	        document.getElementById("pageCount").innerText = pageCount;
	    },
	    getPageSize: function () {
	        return this.pageSize;
	    },
	    pageSizeArray: [10, 20, 50, 100],
	    setPageSizeArray: function (ary) {
	        this.pageSizeArray = ary;
	        this.pageSize = this.pageSizeArray[0];
	    },
	    pageSize: 10,
	    setPageSize:function(pageSize){
	        this.pageSize = pageSize;
	    }
	}

page.css

	.page {
	    margin-top: 10px;
	}
	
	.page div {
	    float: right;
	    margin-right: 20px;
	}
	.page div span{
	    font-size: 12px;
	    line-height: 25px;
	}
	
	.page div button {
	    border: 1px gray solid;
	    border-radius: 3px;
	    font-size: 12px;
	    display: inline-block;
	    width: 60px;
	    height: 25px;
	    background-color: #D0D0D0;
	    vertical-align:top;
	    margin: 2px;
	}
	
	.page div input {
	    display: inline-block;
	    width: 60px;
	    height: 27px;
	    border: 1px gray solid;
	    padding-left: 5px;
	    font-size: 12px;
	    color: #0081ff;
	}
	
	.page div button:hover {
	    background-color: #f8f7f7;
	}
	
	.page div select{
	    font-size: 12px;
	    display: inline-block;
	    width: 60px;
	    height: 25px;
	}