tp5框架无刷新分页实现方法分析
本文实例讲述了tp5框架无刷新分页实现方法。分享给大家供大家参考,具体如下:
已tp5 分页为例,
1.默认生成的分页 页码如下:
<ul class="pagination"
<li <a href="?page=1" rel="external nofollow" rel="external nofollow" «</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 »</span </li
</ul
2.点击页码 值,跳转到对应的页面,并get传 page=’1′ or ‘2’;
所以无刷新需要做到两点,阻止页码 a链接跳转 和 传值【post 和 get都可以】,ajax传值到后端控制器时,接收并存入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程序设计有所帮助。
- clang_intprt_t类型探究
- 学习zepto.js(Hello World)
- JS中函数声明与函数表达式的异同
- [技巧]看我如何通过Weeman+Ettercap拿下路由器管理权限
- 一分钟理清Vue-cli 代码构建步骤。
- 点击图片放大至原始图片大小
- 替代jquery1.9版本以前的toggle事件函数(开关)
- 总结CSS3新特性(Animation篇)
- Scrapy爬虫入门
- 移动端页面按手机屏幕分辨率自动缩放的js
- PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获--补充
- es 5 数组reduce方法记忆
- CSS3与动画有关的属性transition、animation、transform对比
- 总结CSS3新特性(Transiton篇)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法