tp5框架无刷新分页实现方法分析
本文实例讲述了tp5框架无刷新分页实现方法。分享给大家供大家参考,具体如下:
已tp5 分页为例,
1.默认生成的分页 页码如下:
<ul class="pagination"> <li><a href="?page=1" rel="external nofollow" rel="external nofollow" >«</a></li> <li><a href="?page=1" rel="external nofollow" rel="external nofollow" >1</a></li> <li class="active"><span>2</span></li> <li class="disabled"><span>»</span></li> </ul>
2.点击页码 值,跳转到对应的页面,并get传 page='1' or '2';
所以无刷新需要做到两点,阻止页码 a链接跳转 和 传值【post 和 get都可以】,ajax传值到后端控制器时,接收并存入$page即可,一定要存入$page,不能是其他变量名(因为框架封装的类里面获取当前页就是从$page中获取的!)
具体做法是:
1.进入首页面(带分页的页面),用js或jQuery 给页码a标签阻止跳转;
$('#pag ul li a').attr("href",'javascript:void(0);');
2.给各页码元素绑定点击事件,所做的逻辑就是当页码被点击时,计算或获取到要跳转的页面值。
3.确定了要跳转的页面值后,然后ajax传值到后端(传递的就是page ,post get方式都可以)。
4.后端控制器获取到传值,并存入$page ,其他分页的逻辑按照正常做法查询即可,只是查询出来的数据需要组装成字符串返回去。(返回去的还需要有页码字符串,每一次无刷新的页码字符串都不同,每切换一个页面,需要重新再和数据更换一次)
4.1为什么定义为$page? 请去框架tp5 thinkphp/think/db/Query.php 找到paginate方法,入下位置(1333-1338行):
$page = isset($config['page']) ? (int) $config['page'] : call_user_func([ $class, 'getCurrentPage', ], $config['var_page']); $page = $page < 1 ? 1 : $page;

5.返回的数据通过jquery填入页面里,并删除之前的数据元素!
2-5 jquery代码如下:
$(function(){
//去掉分页的点击跳转
del_jump();
//当分页被点击时,进行无刷新分页
$("#pag").on('click','ul li a',function(){
//当前被点击的页码数 或者 箭头
dianji = $(this).html();
current_page = $('.active span').html();
page = '';
if(dianji == "«") {
current_page = Number(current_page);
page = String(current_page-1);
}else if(dianji == "»") {
current_page = Number(current_page);
page = String(current_page+1);
}else{
page = dianji;
}
//发送ajax到后台
$.post("{:url('Virtual/index')}",
{'page':page},
function(data){
//将返回的数据添加到页面上去
$('#record_list').html(data.html);
$('#pag').html(data.pages);
del_jump();
},'json');
});
//去掉分页的点击跳转
function del_jump() {
$('#pag ul li a').attr("href",'javascript:void(0);');
}
});
更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。
相关文章
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
很早就想在自己的机子上搭建PHP的开发环境,今天难得有这个机会,在网上找了一些教程和程序,实践了一把,过程是很艰辛的,因为遇到了很多的问题,在这里总结一下。2009-06-06
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
本文除了要演示一下SCP方法外,还要分享一下WDCP升级php5.3后如何成功安装memcached和eaccelerator,感兴趣的朋友一起看看吧2017-07-07
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
这篇文章主要介绍了Zend Framework教程之请求对象的封装Zend_Controller_Request用法,结合实例形式详细分析了请求对象封装的原理,使用方法与相关注意事项,需要的朋友可以参考下2016-03-03


最新评论