jQuery pagination分页示例详解_jquery-HTML5中文学习网

本文实例为大家分享了jQuery pagination分页示例的具体代码，供大家参考，具体内容如下

前台html

<!doctype html><html><head><meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport"> <title>通知公告列表</title> <link rel="stylesheet" href="../css/pagination.css" type="text/css"></link>  <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>  <script type="text/javascript" src="../js/jquery.pagination.js"></script>  <style> .page{ width:95%; height:770px; margin:0 auto; padding:10px; border:2px solid #ccc; border-radius:5px; margin-bottom:30px; } a{text-decoration:none;color:#489FE8;} </style> <script>  //var fpURL="url"; var fpURL="url";   var total=0;   $(function(){//页面加载时，进行绑定  $.ajax({ type:"get", url:fpURL+"GetZxwj?lx=List", data:"", dataType:"json", beforeSend: function () {  $(".img").show(); }, complete:function(){  $(".img").hide(); bind(0);  }, success:function(data){ var obj=eval(data); $.each(obj.data,function(index,item){   total=parseInt(item.co);//获取总条数 }) } })  });   //点击分页时调用的函数，page_id为当前页的索引  function pageselectCallback(page_id, jq) {  bind(page_id);  }   var ListArr=[]; function bind(pageIndex)  {  var temp="";  $.ajax({  type:"GET",   //url:"sys/news.do?method=findByTopic&page="+(pageIndex+1),  url:fpURL+"GetZxwj?lx=zxwjList&ts="+(pageIndex+1),   async:false, ////作用是防止在ajax成功调用之前就调用$("#Pagination").pagination,这个时候数据个数还没有初始化   dataType:"json",   //data:"pageIndex="+(pageIndex+1),//传递页面索引  data:"",  //发送请求前，显示加载动画  beforeSend:function(){ $(".img").show(); },  //请求完毕后，隐藏加载动画  complete:function(){  $(".img").hide(); },  success:function(data){   var obj=eval(data);  //alert(obj.data.length);  //total=obj.data.length;//记录总数   $.each(obj.data,function(index,item){   temp+="<div>"+   "<a style='font-size: 18px; font-famliy: 微软雅黑;font-weight:700;' OnClick='document.location.href=""+ fpURL +" rel="external nofollow" cmp/tzgg/zxwjContent.html?id="+ item.wjid +""' >"+ item.wjmc+"</a> "+   "<div style='font-size: 14px; font-famliy: 宋体; text-indent: 2em; margin-top: 5px;'>"+ item.fbrq+" </div> "+  "<hr style='border:1px solid #ccc;width:100%;'/>";    });   $("#datas").html(temp); //将创建的新行附加在DIV中   }   });   if(total!=0){  //调用分页函数，将分页插件绑定到id为Pagination的div上  $("#Pagination").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数  callback: pageselectCallback, //点击分页时，调用的回调函数  prev_text: '« 上一页', //显示上一页按钮的文本  next_text: '下一页 »', //显示下一页按钮的文本  items_per_page:12, //每页显示的项数  num_display_entries:4, //分页插件中间显示的按钮数目  current_page:pageIndex, //当前页索引  num_edge_entries:2 //分页插件左右两边显示的按钮数目   });  }  }  </script></head> <body style="">  <div class="img" style="display:none;text-align:center;margin:0 auto;margin-top:200px;z-index:1000;"> <img src="../image/jz.jpg"></div><div class="page"> <div id="datas">  </div> <div id="Pagination" style="margin-bottom:10px;"></div> </div>   </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。