jQuery 分页插件

.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;
}

(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'><</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'>></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);

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