ajax分页实现（php）
使用jquery.pagination.js插件
引入js文件、css文件
|
1
2
|
<link rel="stylesheet" href="/css/pagination.css"/><link rel="stylesheet" href="/css/project-search.css"/> |
jq文件必须在pagination前加载，否则会出错
|
1
2
|
<script type="text/javascript" src="/lib/jquery.min.js"></script><script type="text/javascript" src="/lib/jquery.pagination.js"></script> |
前台添加分页div
|
1
|
<div id="Pagination"></div> |
js代码：（由于在框架中使用所以其他参数就不去了……）
1 <script type="text/javascript">
2 $(function(){
3 //每页条数
4 var pageSize = 15;
5
6 var currentPageNum = 0;
7
8 var url_1 = '/search/projectcount';
9 var url_2 = '/search/projectlist';
10 var type = 'get';
11
12 var totalCount = 0;
13 var totalPage = 0;
14
15 var initQueryString_1 =
16 {
17 name: '',
18 industryCode: '',
19 typeCode: '',
20 wasBindUniTechnology: '-9',
21 investStageCode: '',
22 provinceCode: ''
23 }
24
25 var initQueryString_2 =
26 {
27 name: '',
28 industryCode: '',
29 typeCode: '',
30 wasBindUniTechnology: '-9',
31 investStageCode: '',
32 provinceCode: '',
33 pageIndex: '0',
34 pageSize: pageSize
35 }
36
37 //获取总页数，产生分页
38 $.ajax({
39 url:url_1,
40 type:type,
41 data:initQueryString_1,
42 success : function(msg){
43 totalCount = msg;
44
45 totalPage = Math.ceil((msg!='0'?msg:1)/pageSize);
46 $("#Pagination").pagination(totalPage, {
47 callback: pageSearch
48 });
49 $('.project-search-pages .allPage').html(totalPage);
50
51 //如果数据总条数小于pageSize，则不显示分页
52 if (totalCount < pageSize){
53 $('.project-search-pages').addClass('hidden');
54 }
55 if (totalCount > pageSize){
56 $('.project-search-pages').removeClass('hidden');
57 }
58 }
59 })
60
61
62
63
64 //获取数据，第一页，不超过pageSize条
65 $.ajax({
66 url:url_2,
67 type:type,
68 data:initQueryString_2,
69 beforeSend :function(){
70 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
71 },
72 success : function(msg){
73 $(".project-search-list").html(msg);
74 }
75 })
76
77
78
79 //给搜索按钮添加点击事件
80 $('#searchBtn').click(function() {
81 btnSearch();
82 });
83
84 //给所有筛选项添加点击事件
85 $('.map-item-box li a').click(function(){
86 classifySearch();
87 });
88
89 //给跳转到指定页添加事件
90 $('.my-page-btn').click(function(){
91 var goPage = $('.page-go input').val() - 1;
92 var allPage = $(".allPage").text();
93
94 if(goPage > -1 && goPage < allPage){
95 //产生分页
96 $("#Pagination").pagination(allPage,{
97 callback: pageSearch,
98 current_page: goPage
99 });
100 //更新数据
101 $(".project-search-list").html(goToPage(goPage));
102 } else {
103 //清空用户跳转页数
104 $(".page-go input").val("");
105 return false;
106 }
107 //清空用户跳转页数
108 $(".page-go input").val("");
109
110 });
111
112
113 function btnSearch() {
114
115 $('.map-item-box li a').removeClass('selected');
116 $('.map-item-box li.map-item-all-btn a').addClass('selected');
117
118 var paras =
119 {
120 name:$('#name').val(),
121 industryCode:'',
122 typeCode:'',
123 wasBindUniTechnology:'',
124 investStageCode:'',
125 provinceCode:''
126 };
127
128 $.ajax({
129 url: '/search/projectcount',
130 type: 'get',
131 data: paras,
132 success: function(msg) {
133 totalCount = msg;
134 totalPage = Math.ceil((msg!='0'?msg:1)/pageSize);
135 $("#Pagination").pagination(totalPage, {
136 callback: pageSearch
137 });
138 $('.project-search-pages .allPage').html(totalPage);
139
140 //如果数据总条数小于pageSize，则不显示分页
141 if (totalCount < pageSize){
142 $('.project-search-pages').addClass('hidden');
143 }
144 if (totalCount > pageSize){
145 $('.project-search-pages').removeClass('hidden');
146 }
147 }
148 })
149
150 paras.pageIndex = 0;
151 paras.pageSize = pageSize;
152
153 $.ajax({
154 url:'/search/projectlist',
155 type:'get',
156 data:paras,
157 beforeSend :function(){
158 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
159 },
160 success : function(msg){
161 $(".project-search-list").html(msg);
162 }
163 })
164
165 }
166
167 function classifySearch() {
168 $('#name').val('');
169
170 var paras =
171 {
172 name:'',
173 industryCode:$("#industryCode .selected").attr('data-code'),
174 typeCode:$("#typeCode .selected").attr('data-code'),
175 wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'),
176 investStageCode:$("#investStageCode .selected").attr('data-code'),
177 provinceCode:$("#provinceCode .selected").attr('data-code'),
178 };
179
180 $.ajax({
181 url: '/search/projectcount',
182 type: 'get',
183 data: paras,
184 success: function(msg) {
185 totalCount = msg;
186 totalPage = Math.ceil((msg!='0'?msg:1)/pageSize);
187 $("#Pagination").pagination(totalPage, {
188 callback: pageSearch
189 });
190 $('.project-search-pages .allPage').html(totalPage);
191
192 //如果数据总条数小于pageSize，则不显示分页
193 if (totalCount < pageSize){
194 $('.project-search-pages').addClass('hidden');
195 }
196 if (totalCount > pageSize){
197 $('.project-search-pages').removeClass('hidden');
198 }
199 }
200 })
201
202 paras.pageIndex = 0;
203 paras.pageSize = pageSize;
204
205 $.ajax({
206 url:'/search/projectlist',
207 type:'get',
208 data:paras,
209 beforeSend :function(){
210 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
211 },
212 success : function(msg){
213 $(".project-search-list").html(msg);
214 }
215 })
216
217 }
218
219 function pageSearch(page_index, jq) {
220 var paras = null;
221 var search_word = $('#name').val();
222
223 if (search_word == '')
224 paras =
225 {
226 name:'',
227 industryCode:$("#industryCode .selected").attr('data-code'),
228 typeCode:$("#typeCode .selected").attr('data-code'),
229 wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'),
230 investStageCode:$("#investStageCode .selected").attr('data-code'),
231 provinceCode:$("#provinceCode .selected").attr('data-code')
232 };
233
234 if (search_word != '')
235 paras =
236 {
237 name:$('#name').val(),
238 industryCode:'',
239 typeCode:'',
240 wasBindUniTechnology:'',
241 investStageCode:'',
242 provinceCode:''
243 };
244
245 paras.pageIndex = page_index;
246 paras.pageSize = pageSize;
247
248 //alert(paras.pageIndex)
249
250 $.ajax({
251 url:'/search/projectlist',
252 type:'get',
253 data:paras,
254 beforeSend :function(){
255 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
256 },
257 success : function(msg){
258 $(".project-search-list").html(msg);
259 }
260 })
261
262 }
263
264 function goToPage(page_index) {
265 var paras = null;
266 var search_word = $('#name').val();
267
268 if (search_word == '')
269 paras =
270 {
271 name:'',
272 industryCode:$("#industryCode .selected").attr('data-code'),
273 typeCode:$("#typeCode .selected").attr('data-code'),
274 wasBindUniTechnology:$("#wasBindUniTechnology .selected").attr('data-code'),
275 investStageCode:$("#investStageCode .selected").attr('data-code'),
276 provinceCode:$("#provinceCode .selected").attr('data-code')
277 };
278
279 if (search_word != '')
280 paras =
281 {
282 name:$('#name').val(),
283 industryCode:'',
284 typeCode:'',
285 wasBindUniTechnology:'',
286 investStageCode:'',
287 provinceCode:''
288 };
289
290 paras.pageIndex = page_index;
291 paras.pageSize = pageSize;
292
293 $.ajax({
294 url:'/search/projectlist',
295 type:'get',
296 data:paras,
297 beforeSend :function(){
298 $(".project-search-list").html('<div style="text-align:center;margin-top:20px"><img src="/img/loading.gif" style="width:30px;height:30px"></div>');
299 },
300 success : function(msg){
301 $(".project-search-list").html(msg);
302 document.body.scrollTop=0;
303 }
304 })
305
306 }
307
308 })
309
310 </script>
后台php 实现，主要是提供数据由前台传递的pageindex ,pagesize 来查询数据并返回
1 //搜索页
2 $con = trim($_GET['title']);
3 $pageIndex = isset($_GET['pageIndex']) ? $_GET['pageIndex']:'';
4 $pageSize = isset($_GET['pageSize']) ? $_GET['pageSize']:'';
5 $pageIndex = $pageIndex*$pageSize;//偏移量
6 $map['isshow'] = 2;
7 $ip = get_client_ip(); 11 $map['title'] = array('like', "%$con%");
12 // 多表联查
13 $proinfo = M("project")->alias('p')
14 ->join("user as u on p.uid = u.id ",'left')
15 ->join("project_type as t on p.type = t.id ",'left')
16 ->where($map)
17 ->field("p.id,p.siteid,title")
18 ->order('addtime desc')
19 ->limit($pageIndex,$pageSize)
20 ->select();
22 40 if(empty($proinfo)){
41 $error = '暂时没有相关信息！';
42 $this->ajaxReturn(array('status'=>0,'msg'=>$error));
43 }else{ 47 $this->ajaxReturn(array('status'=>1,'dataList'=>$proinfo));
48 }
实现起来不是很复杂，理一下思路就好了。
参考网址：http://cy.ncss.org.cn/search/projects 这个网站也是通过ajax请求数据分页的。
耶和华是我的牧者，我必不至缺乏。