您的位置:首页 > 编程学习 > > 正文

tp5框架源码分析(tp5框架无刷新分页实现方法分析)

更多 时间:2021-10-18 11:33:08 类别:编程学习 浏览量:244

tp5框架源码分析

tp5框架无刷新分页实现方法分析

本文实例讲述了tp5框架无刷新分页实现方法。分享给大家供大家参考,具体如下:

已tp5 分页为例,

1.默认生成的分页 页码如下:

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • <ul class="pagination">
  • <li><a href="?page=1" rel="external nofollow" rel="external nofollow" >&laquo;</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>&raquo;</span></li>
  • </ul>
  • 2.点击页码  值,跳转到对应的页面,并get传 page='1' or '2';

    所以无刷新需要做到两点,阻止页码 a链接跳转 和 传值【post 和 get都可以】,ajax传值到后端控制器时,接收并存入$page即可,一定要存入$page,不能是其他变量名(因为框架封装的类里面获取当前页就是从$page中获取的!)

    具体做法是:

    1.进入首页面(带分页的页面),用js或jQuery 给页码a标签阻止跳转;

  • ?
  • 1
  • $('#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行):

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • $page = isset($config['page']) ? (int) $config['page'] : call_user_func([
  •   $class,
  •   'getCurrentPage',
  • ], $config['var_page']);
  • $page = $page < 1 ? 1 : $page;
  • tp5框架源码分析(tp5框架无刷新分页实现方法分析)

    5.返回的数据通过jquery填入页面里,并删除之前的数据元素!

    2-5  jquery代码如下:

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • $(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程序设计有所帮助。

    原文链接:https://blog.csdn.net/leo_jk/article/details/79260418

    标签:分页 无刷新 tp5
    您可能感兴趣