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 ob_start()控制浏览器cache、生成html实现代码
Feb 16 PHP
PHP ajax 异步执行不等待执行结果的处理方法
May 27 PHP
PHP+Mysql基于事务处理实现转账功能的方法
Jul 08 PHP
PHP快速生成各种信息提示框的方法
Feb 03 PHP
yii2分页之实现跳转到具体某页的实例代码
Jun 02 PHP
mac系统下为 php 添加 pcntl 扩展
Aug 28 PHP
PHP中phar包的使用教程
Jun 14 PHP
PHP双向链表定义与用法示例
Jan 31 PHP
PHP Post获取不到非表单数据的问题解决办法
Feb 27 PHP
浅谈php://filter的妙用
Mar 05 PHP
php的无刷新操作实现方法分析
Feb 28 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
Apr 06 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
cmd下运行php脚本
2008/11/25 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
使用PHP编写的SVN类
2013/07/18 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
php实现网站留言板功能
2015/11/04 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
jQuery 技巧小结
2010/04/02 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
js切换光标示例代码
2013/10/10 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python新手如何理解循环加载模块
2020/05/29 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
最新奶茶店创业计划书
2014/01/25 职场文书
十一酒店活动方案
2014/02/20 职场文书
社区科普工作方案
2014/06/03 职场文书
校运动会广播稿300字
2014/10/07 职场文书
个人查摆剖析材料
2014/10/16 职场文书
爱情保证书
2015/01/17 职场文书
《窃读记》教学反思
2016/02/18 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python