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


Posted in PHP onSeptember 26, 2019

本文实例讲述了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;

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

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框架的PHP程序设计有所帮助。

PHP 相关文章推荐
GD输出汉字的函数的分析
Oct 09 PHP
利用 window_onload 实现select默认选择
Oct 09 PHP
针对初学PHP者的疑难问答(1)
Oct 09 PHP
傻瓜化配置PHP环境――Appserv
Dec 13 PHP
PHP 判断变量类型实现代码
Oct 23 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
Jan 14 PHP
PHP实现单例模式最安全的做法
Jun 13 PHP
PHP生成指定长度随机数最简洁的方法
Jul 14 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
Dec 31 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
Jul 31 PHP
php微信公众号开发之校园图书馆
Oct 20 PHP
微信公众号之主动给用户发送消息功能
Jun 22 PHP
php判断目录存在的简单方法
Sep 26 #PHP
php 策略模式原理与应用深入理解
Sep 25 #PHP
php策略模式简单示例分析【区别于工厂模式】
Sep 25 #PHP
PHP 观察者模式深入理解与应用分析
Sep 25 #PHP
php模式设计之观察者模式应用实例分析
Sep 25 #PHP
php创建类并调用的实例方法
Sep 25 #PHP
关于php开启错误提示的总结
Sep 24 #PHP
You might like
php 分页函数multi() discuz
2009/06/21 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
Javascript的比较汇总
2016/07/25 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
Vue2.0权限树组件实现代码
2017/08/29 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
个人收入证明范本
2014/09/18 职场文书
同学聚会感言一句话
2015/07/30 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers