jQuery pagination分页示例详解
Posted xanthedsf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery pagination分页示例详解相关的知识，希望对你有一定的参考价值。
前台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.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分页示例详解的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 分页插件（jQuery.pagination.js）ajax 实现分页
Ajax分页插件Pagination从前台jQuery到后端java总结
第二百零九节，jQuery EasyUI，Pagination(分页)组件