jQuery 分页插件

实现以下效果的分页插件

css 代码

.pre:hover, .next:hover, .pagenum:hover{
    background: #ccc;
}
.pre, .next, .pagenum{
    float:left;
    background:white;
    cursor:pointer;
    text-align: center;
    line-height:38px;
    margin:0 3px;
    height:38px;
    width:38px;
    display:block;
    border:1px solid #95B8E7}
.active{
    background: #95B8E7 !important;
    cursor:not-allowed;
}

js 代码

(function($) {
    var defaults = {
        pages: 1,   // 请求页码
	currentPage: 1, // 当前页码
	rows:10, // 請求條數
	url: '', // 后台 URL
	queryParams:{}, // 请求额外参数
	loadFun: function(res){return res;} // 请求成功后执行函数
    };
    
    var _self, param, opt;

    $.fn.jpage = function (options) {
    	param = $.extend({}, options.queryParams);
        opt = $.extend({}, defaults, options);
    	_self = this;
        // 發送請求
	getRows();
    }

    // 頁碼顯示
    function setPages(dom, opt){
    	$(dom).html('');
        $(dom).append("<span title='上一頁' class='pre'>&lt;</span>");
        // 顯示5個頁碼 
        if(opt.currentPage > 5){
            for(var i=opt.currentPage-4; i<opt.currentPage+1; i++){
	        $(dom).append("<span class='pagenum' data-id='"+ i +"'>"+ i +"</span>");
	    }
        }else{
            for(var i=1; i<opt.pages+1; i++){
	        $(dom).append("<span class='pagenum' data-id='"+ i +"'>"+ i +"</span>");
	    }
        }
        $(dom).append("<span title='下一頁' class='next'>&gt;</span>");
        $(dom).append("<span style='position:relative;top:16px;clear:both'> 共 "+opt.pages+" 頁</span>");

        // 當前頁設置
        $(dom).children(".pagenum[data-id='"+opt.currentPage+"']").addClass("active");
    }

    // 頁碼，上下頁點擊事件
    function pageJump(dom, options){
    	$(".pagenum").click(function(){
    	    if(!$(this).hasClass('active')){
    		var pagenum = parseInt($(this).text());
	    	opt.currentPage = pagenum;
	    	// 發送請求
		getRows();
    	    }
	});
    	$(".pre").one("click", function(){
    	    var pagenum = parseInt($(".active").text())-1;
    	    if(0 != pagenum){
    		opt.currentPage = pagenum;
	    	// 發送請求
		getRows();
    	    }
    	});
    	$(".next").one("click", function(){
    	    var pagenum = parseInt($(".active").text())+1;
    	    if(pagenum <= opt.pages){
    		opt.currentPage = pagenum;
	    	// 發送請求
		getRows();
    	    }
    	});
    }

    // 數據請求
    function getRows(){
    	$.post(opt.url, {rows:opt.rows,page:opt.currentPage,filterRules: param}, function(res){
	    opt.loadFun(res);
	    opt.pages = Math.ceil(parseInt(res.total)/opt.rows);
	    setPages(_self, opt);
	    pageJump(_self, param);
	}, "json");
    }
})(jQuery);

后台传送数据格式

{total: 13, rows: []}

js 调用

$('.pagebox').jpage({
	url:"", // 后台路径
	queryParams:{}, // 请求的额外参数
	loadFun: function(res){} // 请求成功执行函数，可设置 html 内容
});