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 相关文章推荐
7个超级实用的PHP代码片段
Jul 11 PHP
PHP文章采集URL补全函数(FormatUrl)
Aug 02 PHP
解析php中curl_multi的应用
Jul 17 PHP
百度站点地图(百度sitemap)生成方法分享
Jan 09 PHP
php利用单例模式实现日志处理类库
Feb 10 PHP
PHP错误和异常处理功能模块示例
Nov 12 PHP
php使用GD2绘制几何图形示例
Feb 15 PHP
关于php 高并发解决的一点思路
Apr 16 PHP
ThinkPHP框架实现数据增删改
May 07 PHP
PHP环形链表实现方法示例
Sep 15 PHP
PHP+AJAX 投票器功能
Nov 11 PHP
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下一个非常全面获取图象信息的函数
2008/11/20 PHP
解析php取整的几种方式
2013/06/25 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Django入门使用示例
2017/12/12 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python实现剪切功能
2019/01/23 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python 实现多线程下载视频的代码
2019/11/15 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
高中生家长寄语大全
2014/04/03 职场文书
办公经费申请报告
2015/05/15 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
创业计划书之美容店
2019/09/16 职场文书