jQuery pagination分頁示例詳解
阿新 • • 發佈：2018-12-23
eval 顯示 索引 dev show jpg sum 把手 操作
前臺html
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
<!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>
|
jQuery pagination分頁示例詳解