ci框架ajax无刷新分页,tp5框架无刷新分页实现方法分析

tp5框架无刷新分页实现方法分析,分页,页码,跳转,页面,框架

tp5框架无刷新分页实现方法分析

易采站长站,站长之家为您整理了tp5框架无刷新分页实现方法分析的相关内容。

本文实例讲述了tp5框架无刷新分页实现方法。分享给大家供大家参考,具体如下:

已tp5 分页为例,

1.默认生成的分页 页码如下:

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;

a822d4184586046950122e8a7ffa6023.png

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程序设计有所帮助。以上就是关于对tp5框架无刷新分页实现方法分析的详细介绍。欢迎大家对tp5框架无刷新分页实现方法分析内容提出宝贵意见

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值