ajax分页实现（php）
2024-04-10 14:24:20
ajax分页实现（php）
使用jquery.pagination.js插件
引入js文件、css文件
<link rel="stylesheet" href="/css/pagination.css"/>
<link rel="stylesheet" href="/css/project-search.css"/>
jq文件必须在pagination前加载，否则会出错
<script type="text/javascript" src="/lib/jquery.min.js"></script><script type="text/javascript" src="/lib/jquery.pagination.js"></script>
前台添加分页div
<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请求数据分页的。
转载于:https://www.cnblogs.com/lovebing/p/6823703.html
ajax分页实现（php）相关推荐
- java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
- PHP、jQuery、jQueryPager结合实现Ajax分页
建立html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法 首先看一下tp5 ...
- Thinkphp ajax分页
Thinkphp中用ajax分页和普通的ajax分页的区别在于处理位置的不同,thinkphp是在控制器的方法中处理ajax传的值,然后返回数据.下面是一个点击事件触发后,显示的内容用ajax分页. ...
- php ajax 分页phpapi,ajax分页_php ajax分页代码
摘要 腾兴网为您分享:php ajax分页代码,智慧农业,长沙银行,一折包邮,信和财富等软件知识,以及381.65,红娘牵线,中经油马,战地小,歌词制作,唯美会,微软必应输入法,邓州在线,螺丝钉,侠客 ...
- 使用MVCPager做AJAX分页所需要注意的地方
1.版本问题,推荐使用2.0以上,对ajax支持才比较的好了 2.当需要使用页索引输入或下拉框以及使用Ajax分页模式时,必须用Html.RegisterMvcPagerScriptResource方 ...
- discuz的ajax,discuz分页函数改成基于jqueryd的ajax分页函数
/** *AJAX分页 *$num 为总共的条数 比如说这个分类下共有15篇文章 *$perpage为每页要显示的条数 *$curpage为当前的页数 *$url为请求路径, *$obj为html ...
- java ajax jquery分页插件_jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...
- 12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
最新文章
- 实践自定义UI—View
- 对称加密-DES解密
- vba移动文件_VBA代码解决方案的第68讲内容：利用WSH,复制文件
- 各位加了一天班累了吧？那我们来继续未完的表单验证吧
- 大数据之-Hadoop3.x_MapReduce_自定义outputformat案例mapperreducer---大数据之hadoop3.x工作笔记0122
- Linux基础——常用命令
- Coding the Matrix Week 1 The Vector Space作业
- input file控件使用accept过滤 限制的文件类型
- VIM：使用js高亮对json文件着色
- 记一次js调试（attachEvent, onchange, onpropertychange）
- 死链接检测 java,【死链接检测】工具查询方法及死链接处理方法
- 微信的Linux版本,ubuntu16.04安装微信，linux原生版
- Java HotSpot(TM) 64-Bit Server VM warning: Sharing is only supported for boot loader classes解决方法
- [RK3288][Android6.0] 主动从WLAN网络切换到移动数据网络
- 特征值和奇异值的关系
- 听说蝴蝶国的小公主可漂亮了！黑亮的头发
- 一文详解 Band Protocol ：预言机博弈中的价值输出
- linux和windows上使用jpype的区别
- windows中MySQL主从配置【第一篇】
- 阿拉伯数字转换中文表示
热门文章
- NVM安装与使用(实现Node多版本控制)
- 有关架构图你需要了解的基础知识
- Serverless的4种错误打开方式
- 在华为写了 13 年代码，都是宝贵的经验
- 中年职场危机，这是我看过最靠谱的建议
- Android: RecyclerView.ViewHolder、Adapter
- 怎么修改_PDF怎么修改文字？其实修改PDF内容很简单
- 成功解决type object ‘h5py.h5.H5PYConfig‘ has no attribute ‘__reduce_cython__‘
- Python之sklearn：LabelEncoder函数简介(编码与编码还原)、使用方法、具体案例之详细攻略
- Python语言学习：创建/删除文件/文件夹、获取当前文件/文件夹路径(系统环境路径/目录)、获取当前文件夹下的所有子文件路径等代码(os系列用法)实现之详细攻略