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 相关文章推荐
用Socket发送电子邮件
Oct 09 PHP
Apache设置虚拟WEB
Oct 09 PHP
php sprintf()函数让你的sql操作更安全
Jul 23 PHP
PHP 检查扩展库或函数是否可用的代码
Apr 06 PHP
php实现utf-8和GB2312编码相互转换函数代码
Feb 07 PHP
PHPMailer发送HTML内容、带附件的邮件实例
Jul 01 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
Apr 14 PHP
php三元运算符知识汇总
Jul 02 PHP
php实现将base64格式图片保存在指定目录的方法
Oct 13 PHP
Laravel中服务提供者和门面模式的入门介绍
Nov 06 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
Nov 20 PHP
php中pcntl_fork详解
Apr 01 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
Terran剧情介绍
2020/03/14 星际争霸
德劲1102收音机的打理维修案例
2021/03/02 无线电
php db类库进行数据库操作
2009/03/19 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python简单遍历字典及删除元素的方法
2016/09/18 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
仓管员岗位职责范文
2013/11/08 职场文书
学生安全责任书模板
2014/07/25 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
只用Python就可以制作的简单词云
2021/06/07 Python