jQuery插件分页

pythopen 8年前

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>