javascript 分页插件

js分页插件用于ajax 分页。最近项目需要js分页插件。回家加班化俩个小时完成了这个js插件。本茶插件需要jQuery支持。

写文章的主要作用是为了给做个笔记以防以后忘记了。所以我就不加注释了。所有的行数和相关变量。通过函数名和变量名称去识别。

核心js文件

var Pagination = {  
  
    showPageCount: 7,

    init: function (obj, callback) {  
        this.bindListener(obj, callback);  
    },  
    createHtml: function (pageIndex, recordCount, pageSize) {  
  
        var pageCount = Math.ceil(recordCount / pageSize);  
        var showPageCount = this.showPageCount;  
        var MaxCount = 10000000000;  
        var HalfPageCount = (showPageCount + 1) / 2;  
        var html = [];  
  
        if (pageCount > MaxCount) {  
            pageCount = MaxCount;  
        }  
        if (pageIndex > pageCount - 1) {  
            pageIndex = pageCount - 1;  
        }  
        if (pageIndex > 0) {  
            html.push("<span class=\"previous\"><a href=\"#\" page= " + (pageIndex - 1) + " data-rec=\"上一页\">上一页</a></span>");  
        }  
        else {  
            html.push("<span class=\"disable previous\">上一页</span>");  
        }  
        if (pageCount <= showPageCount) {  
            for (var i = 0; i < pageCount; i++) {  
                if (pageIndex == i) {  
                    html.push("<span class=\"current num\">" + (i + 1) + "</span>");  
                }  
                else {  
                    html.push("<span class=\"num\"><a href=\"#\"  page=" + i + ">" + (i + 1) + "</a></span>");  
                }  
            }  
        }  
        else if (pageIndex < HalfPageCount) {  
            for (var i = 0; i < showPageCount - 1; i++) {  
                if (pageIndex == i) {  
                    html.push("<span class=\"current num\">" + (i + 1) + "</span>");  
                }  
                else {  
                    html.push("<span class=\"num\"><a href=\"#\"  page=" + i + ">" + (i + 1) + "</a></span>");  
                }  
            }  
  
            html.push("<span class=\"dots\">...</span>");  
            html.push("<span class=\"num\"><a href=\"#\"  page=" + (pageCount - 1) + ">" + pageCount + "</a></span>");  
        }  
        else if (pageIndex >= pageCount - HalfPageCount - 1) {  
            html.push("<span class=\"num\"><a href=\"#\" page='0'>" + 1 + "</a></span>");  
            html.push("<span class=\"dots\">...</span>");  
            for (var i = pageCount - showPageCount + 1; i < pageCount; i++) {  
                if (pageIndex == i) {  
                    html.push("<span class=\"current num\">" + (i + 1) + "</span>");  
                }  
                else {  
                    html.push("<span class=\"num\"><a href=\"#\" page=" + i + ">" + (i + 1) + "</a></span>");  
                }  
            }  
        }  
        else {  
            html.push("<span class=\"num\"><a href=\"#\" page=0>" + 1 + "</a></span>");  
            html.push("<span class=\"dots\">...</span>");  
  
            for (var i = pageIndex - HalfPageCount / 2; i <= pageIndex + HalfPageCount / 2; i++) {  
                if (pageIndex == i) {  
                    html.push("<span class=\"current num\">" + (i + 1) + "</span>");  
                }  
                else {  
                    html.push("<span class=\"num\"><a href=\"#\" page=" + i + ">" + (i + 1) + "</a></span>");  
                }  
            }  
            html.push("<span class=\"dots\">...</span>");  
            html.push("<span class=\"num\"><a href=\"#\" page =" + (pageCount - 1) + ">" + pageCount + "</a></span>");  
        }  
  
        if (pageIndex < pageCount - 1) {  
            html.push("<span class=\"next\"><a href=\"#\" page=" + (pageIndex + 1) + " data-rec=\"下一页\">下一页</a></span>");  
        }  
        else {  
            html.push("<span class=\"disable next\">下一页</span>");  
        }  
  
        html.push("<span class=\"total\">每页" + pageSize + "条</span>");  
        html.push("<span class=\"total total_page\">共" + pageCount + "页</span>");  
        html.push("<span class=\"page_jump\">到</span><input id='pageInput' oldpage='' maxlength='" + pageCount + "' type='text' ><span class=\"page_jump\">页</span><button type='button' id='pagebtn'>确定</button>");  
  
        //html.push("<script>pagination(" + pageCount + ",$('#pageInput'), $('#pagebtn'));</script>");  
        return html.join("");  
    },  
  
    bindListener: function (obj,callback) {  
	
        obj.on("click", "a", function () {  
            if (typeof callback === "function") {  
                var index = $(this).attr("page");  
                callback(parseInt(index));  
            }  
            return false;  
        });
		
		
		obj.on("click","button",function(){
			var pageInput = $("#pageInput");
			if (typeof callback === "function") {  
                var index = pageInput.val();
                callback(parseInt(index)-1);  
            }  
            return false;  
		});
		
		var pageButton = $("#pageButton");
		
		obj.on("keyup","input",function(e){
			
			switch (e.keyCode) {
				case 37:
					break;
				case 38:
					break;
				case 39:
					break;
				case 40:
					break;
				case 13:
					changePage();
					break;
				case 8:
					$(e.target).attr('oldpage', $(e.target).val());
					break;
				case 46:
					$(e.target).attr('oldpage', $(e.target).val());
					break;
				default :
					validPage();
			}
			return false;
		});
		
		 //分页
		function changePage() {
			
			var pageInput = $("#pageInput");
			var page = pageInput.val();
			var maxPage = parseInt($(".total_page").html().substring(1,4));
			var pattern = new RegExp("^[1-9]\\d{0," + maxPage.toString().length + "}$");
			if (page.trim() == "") {
				pageInput.focus();
				return;
			}
			if (pattern.test(page)) {
				page = parseInt(page);
				maxPage = parseInt(maxPage);
				if (page > maxPage || page < 0) {
					pageInput.val("").focus();
					return;
				}
			} else {
			
				pageInput.val("").focus();
				return;
			}
			callback(parseInt(page));
		}

		//页码校验v2
		function validPage() {
			var pageInput = $("#pageInput");
			
			var maxPage = parseInt($(".total_page").html().substring(1,4));
			
			var page = pageInput.val();
			var pattern = /^[0-9]+$/;
			var oldpage = pageInput.attr("oldpage") || '';
			if (page.trim() == "") {
				pageInput.val("");
				return;
			}
			if (!pattern.test(page)) {
				pageInput.val(oldpage);
				return;
			}
			var pageInt = parseInt(page);
			if (page.substr(0, 1) == '0') {
				pageInput.val(pageInt);
			}
			if (pageInt == 0) {
				pageInput.val('');
				return;
			}
			if (pageInt > parseInt(maxPage)) {
				pageInput.val(page.substr(0, page.length - 1));
				return;
			}
			pageInput.attr('oldpage', pageInput.val());
		}
    },  
    Page: function (obj, pageIndex, recordCount, pageSize) {  
        obj.empty();  
        obj.html(this.createHtml(pageIndex, recordCount, pageSize));  
    }  
  
}  

调用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="pagination.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body>
<div class="pageination_plugin"></div>
<script typeof="text/javascript">
   function a(i) {  //定义回掉函数
       alert("index is :" + i);
       Pagination.Page($(".pageination_plugin"),i,10000,20);
   }
   Pagination.init($(".pageination_plugin"),a); //初始化插件
   Pagination.Page($(".pageination_plugin"),10,100000 , 20);  //首次调用
</script>

</body>
</html>