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 相关文章推荐
php 图片上添加透明度渐变的效果
Jun 29 PHP
小文件php+SQLite存储方案
Sep 04 PHP
深入PHP运行环境配置的详解
Jun 04 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
Jan 19 PHP
PHP获取Exif缩略图的方法
Jul 13 PHP
十大使用PHP框架的理由
Sep 26 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
Dec 11 PHP
高质量PHP代码的50个实用技巧必备(上)
Jan 22 PHP
php模拟post上传图片实现代码
Jun 24 PHP
Yii2中事务的使用实例代码详解
Sep 07 PHP
Yii全局函数用法示例
Jan 22 PHP
利用Laravel事件系统如何实现登录日志的记录详解
May 20 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以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
python中查看变量内存地址的方法
2015/05/05 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
教师自我评价范文
2013/12/16 职场文书
交通安全教育制度
2014/02/02 职场文书
同居协议书范本
2014/04/23 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python