本文實例為大家分享了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> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
