jQuery pagination分頁示例詳解
本文實(shí)例為大家分享了jQuery pagination分頁示例的具體代碼,供大家參考,具體內(nèi)容如下
前臺(tái)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(){//頁面加載時(shí),進(jìn)行綁定 $.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);//獲取總條數(shù) }) } }) }); //點(diǎn)擊分頁時(shí)調(diào)用的函數(shù),page_id為當(dāng)前頁的索引 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成功調(diào)用之前就調(diào)用$("#Pagination").pagination,這個(gè)時(shí)候數(shù)據(jù)個(gè)數(shù)還沒有初始化 dataType:"json", //data:"pageIndex="+(pageIndex+1),//傳遞頁面索引 data:"", //發(fā)送請(qǐng)求前,顯示加載動(dòng)畫 beforeSend:function(){ $(".img").show(); }, //請(qǐng)求完畢后,隱藏加載動(dòng)畫 complete:function(){ $(".img").hide(); }, success:function(data){ var obj=eval(data); //alert(obj.data.length); //total=obj.data.length;//記錄總數(shù) $.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); //將創(chuàng)建的新行附加在DIV中 } }); if(total!=0){ //調(diào)用分頁函數(shù),將分頁插件綁定到id為Pagination的div上 $("#Pagination").pagination(total, { //recordCount在后臺(tái)定義的一個(gè)公有變量,通過從數(shù)據(jù)庫查詢記錄進(jìn)行賦值,返回記錄的總數(shù) callback: pageselectCallback, //點(diǎn)擊分頁時(shí),調(diào)用的回調(diào)函數(shù) prev_text: '« 上一頁', //顯示上一頁按鈕的文本 next_text: '下一頁 »', //顯示下一頁按鈕的文本 items_per_page:12, //每頁顯示的項(xiàng)數(shù) num_display_entries:4, //分頁插件中間顯示的按鈕數(shù)目 current_page:pageIndex, //當(dāng)前頁索引 num_edge_entries:2 //分頁插件左右兩邊顯示的按鈕數(shù)目 }); } } </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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery Pagination Ajax分頁插件(分頁切換時(shí)無刷新與延遲)中文翻譯版
- jquery pagination插件實(shí)現(xiàn)無刷新分頁代碼
- jquery分頁插件jquery.pagination.js使用方法解析
- jquery.pagination.js 無刷新分頁實(shí)現(xiàn)步驟分享
- jQuery EasyUI Pagination實(shí)現(xiàn)分頁的常用方法
- Jquery 分頁插件之Jquery Pagination
- jQuery Pagination分頁插件使用方法詳解
- jquery分頁插件pagination使用教程
- jquery.pagination.js分頁使用教程
相關(guān)文章
jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實(shí)例形式分析了jQuery針對(duì)xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下2018-05-05再談Jquery Ajax方法傳遞到action(補(bǔ)充)
之前寫過一篇文章Jquery Ajax方法傳值到action,本文是對(duì)該文的補(bǔ)充2014-05-05使用jquery.form.js實(shí)現(xiàn)圖片上傳的方法
這篇文章主要介紹了使用jquery.form.js實(shí)現(xiàn)圖片上傳的方法,涉及jquery使用表單插件jquery.form.js進(jìn)行圖片上傳的提交、類型驗(yàn)證、執(zhí)行結(jié)果回調(diào)顯示等技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-05-05slideToggle+slideup實(shí)現(xiàn)手機(jī)端折疊菜單效果
這篇文章主要為大家詳細(xì)介紹了slideToggle+slideup實(shí)現(xiàn)手機(jī)端折疊菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05JQuery動(dòng)畫和停止動(dòng)畫實(shí)例代碼
實(shí)例中涉及到使用動(dòng)畫方法animate,動(dòng)畫停止方法Stop,其他詳情在示例代碼中都有注釋。2013-03-03JS在IE下缺少標(biāo)識(shí)符的錯(cuò)誤
今天在使用一個(gè)jQuery的插件時(shí),發(fā)現(xiàn)在IE下總報(bào)錯(cuò),但在Firefox下就很正常,所報(bào)的錯(cuò)誤就是:缺少標(biāo)識(shí)符!2014-07-07從重置input file標(biāo)簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別
這篇文章主要介紹了從重置input file標(biāo)簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06最新最熱最實(shí)用的15個(gè)jQuery插件匯總
本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實(shí)用的15款jQuery插件,都有著非常炫酷的效果,十分的實(shí)用,這里推薦給大家。2015-07-07fancybox1.3.1 基于Jquery的插件在IE中圖片顯示問題
JQuery的彈出窗口插件也很多了,例如Lightbox…這個(gè)我們介紹比較優(yōu)秀的Plugin – Fancybox。2010-10-10jQuery實(shí)現(xiàn)的電子時(shí)鐘效果完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的電子時(shí)鐘效果,結(jié)合完整實(shí)例形式分析了jQuery日期與時(shí)間操作技巧與相關(guān)函數(shù)使用注意事項(xiàng),需要的朋友可以參考下2018-04-04