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 相关文章推荐
比file_get_contents稳定的curl_get_contents分享
Jan 11 PHP
利用PHP+JS实现搜索自动提示(实例)
Jun 09 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
Oct 15 PHP
thinkphp文件处理类Dir.class.php的用法分析
Dec 08 PHP
PHP中trim()函数简单使用指南
Apr 16 PHP
ThinkPHP中where()使用方法详解
Apr 19 PHP
php pdo操作数据库示例
Mar 10 PHP
thinkphp5 migrate数据库迁移工具
Feb 20 PHP
PHP闭包定义与使用简单示例
Apr 13 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
Jun 20 PHP
Yii 使用intervention/image拓展实现图像处理功能
Jun 22 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
Oct 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会话(session)说明介绍
2016/08/21 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
Js基础学习资料
2010/11/23 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python生成密码字典的方法
2018/07/06 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Python中bisect的使用方法
2019/12/31 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
如何选择使用结构还是类
2014/05/30 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
中考学习决心书
2015/02/04 职场文书
2015年共青团工作总结
2015/05/15 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
mysql全面解析json/数组
2022/07/07 MySQL