thinkphp+ajax 实现点击加载更多数据
https://blog.csdn.net/a898712940/article/details/78545599?utm_source=blogxgwz8
适用范围:thinkphp3.2和thinkphp5.0
php代码:
public function myorder_list(Request $request){ $uid = $this->uid;
$where = array(
'uid' => $uid,
);
$page = $this->request->param('page') ? $this->request->param('page') : 1; //获取请求的页数
$num = 10;//请求条数
$order_list = db('shop_order')
->alias('so')
->join(config('database.prefix').'shop_order_goods sog','so.id = sog.orderid')
->field('so.ordersn,so.pay_price,sog.id,sog.orderid,sog.goodsid,sog.goods_name,sog.goods_price,sog.thumb,sog.total')
->where($where)
->order("so.createtime", 'desc')
->page($page,$num)
->select(); foreach ($order_list as $k=>$v){
$order_list[$k]['total'] = db('member_video')->where('orderid',$v['id'])->count();
}
//判断是否为ajax请求,获取更多数据
$count = count($order_list);
if($this->request->isPost()){
if($count<$num){//判断是否到尾页
$order_list[]['id']=0;//到尾页返回0
}
return json($order_list);//将数组转成json格式返回
exit;//中断后面的display()
}
$this->assign('order_list',$order_list);
$this->assign(['num'=>$num,'count'=>$count]);
return $this->view->fetch();
}
html代码:
<ul class="orderlist-wrap" >
{if !empty($order_list)}
{volist name="order_list" id="vo"}
<li class="orderlist">
<a class="orderlist-a" href="">
<img src="{if !empty($vo.thumb)} {$vo.thumb} {else} /uploads/videos/20171109/1627f7f77cefa595bc0ea4b95bdd8f30.jpg {/if}" />
<span class="orderlist-txt-l">
<span class="orderlist-txt-ls1">{$vo.ordersn}</span>
<span class="orderlist-txt-ls2">
<i>数量:{$vo.total}</i>
<i>总价:<span class="iconfont13 icon-rmb"></span>{$vo.pay_price}</i>
</span>
</span>
</a>
<span class="orderlist-txt-r">
<span class="orderlist-txt-r1">待评价</span>
<a class="orderlist-txt-r2">评价</a>
</span>
</li>
{/volist}
{else/}
<div class="tomore" id="nocell" style="text-align: center;line-height: .55rem;" >暂无订单记录...</div>
{/if}
</ul>
{if $count egt $num}
<div class="tomore" id="getmore" style="text-align: center;line-height: .55rem;color: #0061ff;">查看更多<i class="iconfont12 icon-gengduo1"></i></div>
{/if} <!-- 请求的页数-->
<input type="hidden" name="" id="page" value="2">
js代码:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var page = $("#page").val(); //从第二页开始获取数据
$("#getmore").click(function(){
$.ajax({
type: "post",
dataType: "json",
url: '{:url("m/member/myorder_list")}',
data: {page:page},
success: function(data) {
//console.log(data);
var str = "";//定义变量保存内容
$.each(data,function(index,array){
if (array['id']){
str += '<li class="orderlist">'+
'<a class="orderlist-a" href="">'+
'<img src="'+array['thumb']+'"/>'+
'<span class="orderlist-txt-l">'+
'<span class="orderlist-txt-ls1">'+array['goods_name']+'</span>'
+'<span class="orderlist-txt-ls2">'
+'<i>数量:'+array['total']+'</i>'
+'<i>总价:<span class="iconfont13 icon-rmb"></span>'+array['goods_price']*array['total']+'</i>'+
'</span>'+
'</span>'+
'</a>'+
'<span class="orderlist-txt-r">'+
'<span class="orderlist-txt-r1">'+'待评价'+'</span>'+
'<a class="orderlist-txt-r2">'+'评价'+'</a>'+
'</span>'+
'</li>';
}else{
$("#getmore").html("没有更多内容了..");
}
});
$(".orderlist-wrap").append(str); //把HTML添加到容器
var pageval = page++;//页数+1
$("#page").val(pageval);
}
});
});
</script>
thinkphp+ajax 实现点击加载更多数据的更多相关文章
- ajax点击加载更多数据图片(预加载)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- Yii 1开发日记 -- Ajax实现点击加载下一页
功能实现:先输出一页的内容,然后点击加载下一页,如图 1.控制器中 /** * 消费记录:列出用户购买章节的记录 */ public function actionMyPayHis() { //点击加 ...
- Spring+Hibernate+struts2+JPA 注解+跨域//完成手机端点击加载更多 下拉加载更多
一.使用IDEA新建一个maven项目(student) 1.1.0编写pom文件,添加项目所需要的包 <?xml version="1.0" encoding=" ...
- Jquery点击加载更多
一.点击加载更多有点像分页获取数据类似,下面是本人写的一个简单的小例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- IOS - UITableView分批显示数据 实现点击加载更多
Phone屏幕尺寸是有限的,如果需要显示的数据很多,可以先数据放到一个table中,先显示10条,table底部有一察看更多选项,点击察看更多查看解析的剩余数据.基本上就是数据源里先只放10条, 点击 ...
- tableView中的“点击加载更多”点击不到
假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...
随机推荐
- Java笔记 – JDBC编程
JDBC通过分层技术实现了跨数据库编程.为不同的数据库开发了统一的编程接口,为不同的数据库提供了不同的JAR类库. 一.JDBC基础 1.开发环境 (1)下载对应的Jar包 Oracle的本地Jar包 ...
- css实现文字内容超出显示省略号
white-space: nowrap; /* 内容超出容器宽度时强制不换行 */ overflow: hidden; /* 内容超出容器时隐藏超出部分 */ text-overflow: ellip ...
- python爬取凤凰网站的新闻,及其链接地址,来源,时间和内容,用selenium自动化和requests处理数据
有写规则需要自己定义判断. import requests from selenium import webdriver import time def grasp(urlT): driver = w ...
- 最全Linux常用命令大全
查看系统系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMB ...
- LINUX用户和用户组操作命令
Id Finger Pwck 检查/etc/passwd配置文件内的信息与实际主文件夹是否存在,还可比较/etc/passwd和/etc/shadow的信息是否一致,另外如果/etc/passwd中的 ...
- 内核下枚举进程 (二)ZwQuerySystemInformation
说明: SYSTEM_INFORMATION_CLASS 的5号功能枚举进程信息.其是这个函数对应着ring3下的 NtQuerySystemInformation,但msdn上说win8以后ZwQu ...
- Pascal的sin^-1函数实现
function unsin(t:real):real; var l,r,ans,mid:longint; function dsin(z:real):real; begin exit(sin(z*p ...
- JavaScript中获取HTML元素的方式
JavaScript中获取HTML元素的方式 1.使用id方式获取元素,返回一个具体对象 document.getElementById(id名) 2.使用className方式获取元素,返回类数 ...
- linux 服务 启动 关闭 列表
##查看服务在每个级别的运行状态 chkconfig --list httpd 0:关闭 1:关闭 2:关闭 3:关闭 4:关闭 5:启用 6:关闭 bluetooth ...
- Tomcat小技巧
目录 1.项目路径忽略项目名 2.配置tomcat虚拟目录 3.显示目录文件列表 4.设置URL不区分大小写 1.项目路径忽略项目名 server.xml中修改Context标签中的path属性为/ ...