jQuery插件分頁
下面直接上代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jquery ajax 分頁</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="stilearning" />
<link href="/static/home/css/css.css" rel="stylesheet">
<script src="/static/js/jquery-1.10.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#fpage{width: 595px;margin: 0px auto;padding: 10px 0px 30px;font-size: 12px;}
#fpage span{border: 1px solid #ccc;border-radius: 3px;padding: 6px 10px;margin-left:3px;}
#fpage span:hover{background: #3B99FC;color: #fff;border: 1px solid #3B99FC;}
#fpage span:hover a{color: #fff;}
#fpage span.active{background: #3B99FC;color: #fff;border: 1px solid #3B99FC;}
#fpage span.active a{color: #fff;}
#myredirect{width: 30px;padding-top: 5px;padding-bottom: 5px;height: 16px;text-align: center;border: 1px solid #ccc;border-radius: 4px;margin-left: 10px;}
</style>
</head>
<body style="background:#f5f5f5;">
<header class="i_header">jquery ajax 分頁</header>
<div class="arc">
<div class="arc_ul" id="list"></div>
<div id="fpage"></div>
</div>
<footer class="i_footer">底部版權</footer>
<script>
//ajax分頁插件
(function($){
$.fn.paging = function(options){
var ops = $.extend(true,$.fn.paging.defaults, options);
ops.mythis = this;
//分頁數據函數，得到數據并顯示
var getData = function(page,size){
var data =$.extend({},ops.data, {page:page,size:size});
$.ajax({
type:ops.type,
url:ops.url,
data:data,
dataType:ops.dataType,
beforeSend: ops.beforeSend,
success: function(json){
ops.list(json);
getPageBar(json);
ops.fpage(json);
}
});
}
getData(1,ops.size);
var totalPage;//總頁數
//*分頁條顯示函數
var getPageBar = function(json){
var total = json.status;//總條數
if(!total){
return ;
}
totalPage = Math.ceil(total/ops.size);//總頁數
var page = ops.page;//當前頁
//當前頁大于最大頁數
if(page>totalPage) page = totalPage;
//當前頁小于1
if(page<1) page=1;
var pageStr= ' <span>共'+total+'條 </span> <span>'+page+'/'+totalPage+'</span>';
//如果是第一頁
if(page != 1){
pageStr += ' <span><a href="javascript:void(0)" rel="1">首頁</a></span> <span><a href="javascript:void(0)" rel="'+(page-1)+'">上一頁</a></span>';
}
var cnum = parseInt(ops.maxnum/2);//數字分頁的中間數
var start = page-cnum<1? 1:page-cnum;//數字開始
var end = page+cnum>totalPage ? totalPage : page+cnum;//數字結束
for(var i=start;i<=end;i++){
if(i==page){
pageStr += ' <span class="active"><a href="javascript:void(0)" rel="'+i+'">'+i+'</a></span>';
}else{
pageStr += ' <span><a href="javascript:void(0)" rel="'+i+'">'+i+'</a></span>';
}
}
//如果是最后頁
if(page<totalPage){
pageStr += ' <span><a href="javascript:void(0)" rel="'+(page+1)+'">下一頁</a></span> <span><a href="javascript:void(0)" rel="'+totalPage+'">尾頁</a></span>';
}
pageStr += '<input type="text" id="myredirect" class="myredirect">'
ops.mythis.html(pageStr);
ops.mythis.find(".myredirect").val(ops.page);
ops.mythis.find(".myredirect").focus();
}
//點擊分頁跳轉
ops.mythis.on('click', 'span a', function(event) {
ops.page = parseInt($(this).attr("rel"));
if(ops.page){getData(ops.page,ops.size);}
});
//datatables分頁跳轉
ops.mythis.on('keyup','.myredirect',function(e){
var ipage = parseInt($(this).val());
if(isNaN(ipage) || ipage<1){
return false;
}else if(ipage>totalPage){
ipage=totalPage;
}
ops.page = ipage;
getData(ipage,ops.size);
});
return this;
};
$.fn.paging.defaults = {
page:1,//當前第幾頁
size:3,//每頁顯示數
maxnum:4,//數字分頁數 1 2 3 4 5 這樣的
mythis:{},//當前的分頁對象
data:{},//發向后臺的額外數據
list:function(){},//列表
fpage:function(){},//顯示分頁
url:"/home/list",//后臺地址
type:"GET",//發送方式
dataType:"json",//默認的
beforeSend: function(){$("#list").append('<liid="loading">loading……</li>');},
}
})(jQuery);
$(function(){
//使用方法一
$("#fpage").paging({
page:1,
size:3,
fpage:function(json){
console.log(json);
//$("#fpage").html("hello world");//這里你可以自己改成你想要的分頁樣式
},
list:function(json){
var html="";
var list = json.data;
$.each(list,function(k,v){
html += '<div class="arc_list"><div class="pic"><img src="/static/home/images/7000_2.jpg"></div><h3>'+v.name+'</h3></div>';
});
$("#list").html(html);
}
});
//使用方法二 插件的defaults
$.extend(true,$.fn.paging.defaults,{
page:1,//當前第幾頁
size:1,//每頁顯示數
list:function(json){
var html="";
var list = json.data;
$.each(list,function(k,v){
html += '<div class="arc_list"><div class="pic"><img src="/static/home/images/7000_2.jpg"></div><h3>'+v.name+'</h3></div>';
});
$("#list").html(html);
},//列表
url:"/home/list",//后臺地址
});
$("#fpage").paging();
});
</script>
</body>
</html>
本文由用戶 pythopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！