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

 更新时间:2019年09月26日 10:42:47   作者:leo_jk  
这篇文章主要介绍了tp5框架无刷新分页实现方法,结合实例形式分析了thinkPHP5框架无刷新分页相关原理、实现步骤与操作注意事项,需要的朋友可以参考下

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

已tp5 分页为例,

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

<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标签阻止跳转;

$('#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;

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相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

相关文章

  • php批量修改表结构实例

    php批量修改表结构实例

    下面小编就为大家带来一篇php批量修改表结构实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • laravel框架分组控制器和分组路由实现方法示例

    laravel框架分组控制器和分组路由实现方法示例

    这篇文章主要介绍了laravel框架分组控制器和分组路由实现方法,结合实例形式分析了laravel框架分组控制器和分组路由的基本定义与使用方法,需要的朋友可以参考下
    2020-01-01
  • PHP 获取视频时长的实例代码

    PHP 获取视频时长的实例代码

    本文通过实例代码给大家介绍了php获取视频时长的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • Laravel 5框架学习之表单验证

    Laravel 5框架学习之表单验证

    Laravel 通过 Validation 类让您可以简单、方便的验证数据正确性及查看相应的验证错误信息。如果是更复杂的验证场景,你可能需要创建一个"表单请求"。表单请求是一个自定义的请求类包含了一些验证的逻辑。你可以通过 Artisan 的命令行 make:request 来创建一个表单请求类
    2015-04-04
  • PHP+shell脚本操作Memcached和Apache Status的实例分享

    PHP+shell脚本操作Memcached和Apache Status的实例分享

    这篇文章主要介绍了PHP环境下使用shell脚本操作Memcached和Apache Status的方法,分别还可以控制Memcached进程的启动以及记录Apache Status数据到数据库,需要的朋友可以参考下
    2016-03-03
  • Zend Framework教程之Zend_Config_Ini用法分析

    Zend Framework教程之Zend_Config_Ini用法分析

    这篇文章主要介绍了Zend Framework教程之Zend_Config_Ini用法,较为详细的分析了Zend_Config_Ini操作配置数据的相关技巧,需要的朋友可以参考下
    2016-03-03
  • php 生成自动创建文件夹并上传文件的示例代码

    php 生成自动创建文件夹并上传文件的示例代码

    本篇文章主要是对php生成自动创建文件夹并上传文件的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • Laravel框架中自定义模板指令总结

    Laravel框架中自定义模板指令总结

    Blade 允许你自定义命令,你可以使用 directive 方法注册命令。下面这篇文章主要给大家总结介绍了关于Laravel框架中自定义模板指令的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧
    2017-12-12
  • 基于PHP函数的操作方法

    基于PHP函数的操作方法

    下面小编就为大家带来一篇基于PHP函数的操作方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 实例分析基于PHP微信网页获取用户信息

    实例分析基于PHP微信网页获取用户信息

    本篇内容主要给大家详细分析了用PHP制作微信网页来获取用户基本信息的过程,以及步骤讲解。
    2017-11-11

最新评论