这篇文章主要介绍了tp5框架无刷新分页实现方法,结合实例形式分析了thinkPHP5框架无刷新分页相关原理、实现步骤与操作注意事项,需要的朋友可以参考下
本文实例讲述了tp5框架无刷新分页实现方法。分享给大家供大家参考，具体如下：
已tp5 分页为例，
1.默认生成的分页 页码如下：
<ul class="pagination"> <li></li><li>1</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或j来源gaodai$ma#com搞$代*码网Query 给页码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; <pre></div><p>5.返回的数据通过jquery填入页面里，并删除之前的数据元素！</p><p>2-5 jquery代码如下：</p><div class="gaodaimacode"><pre class="prettyprint linenums"> $(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框架无刷新分页实现方法分析的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：tp5框架无刷新分页实现方法分析
