<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>通知公告列表</title> <link href="https://www.jb51.net/css/pagination.css" type="text/css"></link> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/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 >"+ item.wjmc+"</a> "+ "<div>"+ item.fbrq+" </div> "+ "<hr/>"; }); $("#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> <div> <img src="https://www.jb51.net/image/jz.jpg"> </div> <div> <div> </div> <div></div> </div> </body> </html>
jQuery pagination分页示例详解
内容版权声明：除非注明，否则皆为本站原创文章。
转载注明出处：http://www.heiqu.com/dec13b2a2af12390fb8bdbe5a4c535bb.html