jQuery插件分页
pythopen
9年前
下面直接上代码：
<!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>