php框架tp5分页实现原理,tp5框架无刷新版分页实现方法分析

本文实例讲述了tp5框架无刷新版分页实现方法。共享给大家供大家参考，详细如下：

已tp5 分页为例，

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

• «
• 1
• 2
• »

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

希望本文所述对大家使用TP框架的PHP程序设计有所帮助。