主页 > 知识库 > tp5框架无刷新分页实现方法分析

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

热门标签:沛县400电话办理 江苏电商外呼系统运营商 铜川电话机器人价格 AI电话机器人OEM贴牌 智能电话机器人好公司门萨维 德阳中江如何申请400开头电话 聊城电话外呼系统公司 青白江地图标注 办理重庆400电话

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:
  • tp5框架内使用tp3.2分页的方法分析
  • TP5框架实现自定义分页样式的方法示例
  • ThinkPHP分页类使用详解
  • ThinkPHP 3.2 数据分页代码分享
  • Thinkphp搜索时首页分页和搜索页保持条件分页的方法
  • thinkPHP5分页功能实现方法分析
  • ThinkPHP3.2.3实现分页的方法详解
  • 在Thinkphp中使用ajax实现无刷新分页的方法
  • Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
  • thinkPHP5框架分页样式类完整示例
  • thinkPHP3.2实现分页自定义样式的方法
  • TP3.2框架分页相关实现方法分析

标签:济宁 迪庆 赤峰 鹰潭 乌鲁木齐 山南 三亚 南宁

巨人网络通讯声明:本文标题《tp5框架无刷新分页实现方法分析》,本文关键词  tp5,框架,无,刷新,分页,实现,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《tp5框架无刷新分页实现方法分析》相关的同类信息!
  • 本页收集关于tp5框架无刷新分页实现方法分析的相关信息资讯供网民参考!
  • 推荐文章