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程序设计有所帮助。

相关文章

  • YII2框架中ActiveDataProvider与GridView的配合使用操作示例

    YII2框架中ActiveDataProvider与GridView的配合使用操作示例

    这篇文章主要介绍了YII2框架中ActiveDataProvider与GridView的配合使用操作,结合实例形式分析了YII2框架中ActiveDataProvider与GridView的功能及配合使用相关操作实现技巧,需要的朋友可以参考下
    2020-03-03
  • 关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机

    关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机

    PHP是一种HTML内嵌式的语言,是一种在端执行的嵌入HTML文档的脚本语言,语言的风格有类似于C语言,现在被很多的网站编程人员广泛的运用。这篇文章给大家分享关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机,感兴趣的朋友一起看看吧
    2018-11-11
  • CI框架中数据库操作函数$this->db->where()相关用法总结

    CI框架中数据库操作函数$this->db->where()相关用法总结

    这篇文章主要介绍了CI框架中数据库操作函数$this->db->where()相关用法,结合实例分析了or_where()、where_in()、or_where_in()、where_not_in()及or_where_not_in()等函数的使用技巧,需要的朋友可以参考下
    2016-05-05
  • PHP树-不需要递归的实现方法

    PHP树-不需要递归的实现方法

    下面小编就为大家带来一篇PHP树-不需要递归的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • ThinkPHP无限级分类原理实现留言与回复功能实例

    ThinkPHP无限级分类原理实现留言与回复功能实例

    这篇文章主要介绍了ThinkPHP无限级分类原理实现留言与回复功能实例,并附带有完整的项目源码下载供大家学习参考,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • thinkphp5.1 文件引入路径问题及注意事项

    thinkphp5.1 文件引入路径问题及注意事项

    这篇文章主要介绍了thinkphp5.1 文件引入路径问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • smarty简单应用实例

    smarty简单应用实例

    这篇文章主要介绍了smarty简单应用实例,简单介绍了smarty中数据库查询、数组遍历及调用模板显示数据的相关技巧,简单易懂,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 关于php中的json_encode()和json_decode()函数的一些说明

    关于php中的json_encode()和json_decode()函数的一些说明

    下面小编就为大家带来一篇关于php中的json_encode()和json_decode()函数的一些说明。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • Yii2框架控制器、路由、Url生成操作示例

    Yii2框架控制器、路由、Url生成操作示例

    这篇文章主要介绍了Yii2框架控制器、路由、Url生成操作,结合实例形式分析了Yii2框架控制器、路由、url生成跳转等相关原理及操作技巧,需要的朋友可以参考下
    2019-05-05
  • PHP完整的日历类(CLASS)

    PHP完整的日历类(CLASS)

    PHP完整的日历类(CLASS)...
    2006-11-11

最新评论