码迷,mamicode.com
首页 > Web开发 > 详细

jQuery pagination分页示例详解

时间:2018-12-23 13:52:50      阅读:448      评论:0      收藏:0      [点我收藏+]

标签:插件   结合   视频下载   培训   附加   java   webpack   pad   forum   

前台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分页示例详解

标签:插件   结合   视频下载   培训   附加   java   webpack   pad   forum   

原文地址:https://www.cnblogs.com/xanthedsf/p/10163927.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!