thinkphp+ajax 实现点击加载更多数据

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>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112766.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • kubernetes安装及集群搭建

    kubernetes安装及集群搭建

    2021年5月29日
    84
  • 服务器网络io性能_服务器热备份方案

    服务器网络io性能_服务器热备份方案介质(HDD/SSD)接口sata/scsicontroller,raid卡or南桥,是否有缓存文件系统xfs,或其他brtfs之类的磁盘队列算法deadlinecfqnoopdm内存缓存设置RAID形式性能RAID0磁盘空间使用率:100%,故成本最低。读性能:N单块磁盘的读性能。写性能:N单块磁盘的写性能。冗余:无,任何一块磁盘损坏都将导致数据不可用…

    2022年9月20日
    1
  • java时间类的使用和区别

    java时间类的使用和区别java中经常使用的6大时间类:java.util.Date              日期格式:年月日时分秒java.sql.Date               日期格式:年月日java.sql.Time               日期格式:时分秒java.sql.Timestamp          日期格式:年月日时分秒纳秒    从数据库中取出来的日期一般都用getTimestamp(…

    2022年6月13日
    27
  • sprintf函数的用法linux,sprintf函数用法解析

    sprintf函数的用法linux,sprintf函数用法解析shortsi=-1;sprintf(s,”%04X”,si);产生“FFFFFFFF”,怎么回事?因为spritnf是个变参函数,除了前面两个参数之外,后面的参数都不是类型安全的,函数更没有办法仅仅通过一个“%X”就能得知当初函数调用前参数压栈时被压进来的到底是个4字节的整数还是个2字节的短整数,所以采取了统一4字节的处理方式,导致参数压栈时做了符号扩展,扩展成了32位的整数…

    2022年6月16日
    43
  • copyproperties爆红_利用BeanUtils.copyProperties 克隆出新对象,避免对象重复问题[通俗易懂]

    copyproperties爆红_利用BeanUtils.copyProperties 克隆出新对象,避免对象重复问题[通俗易懂]1、经常用jQuery获取标签里面值val(),或者html(),text()等等,有次想把获取标签的全部html元素包括自己也用来操作,查询了半天发现$(“#lefttr1”).prop(“outerHTML”)即可。2、当时遇到这个错误,后发现是缺少主键错误。3、JsonMappingException:Nosuitableconstructorfound,reatethedef…

    2022年9月26日
    2
  • r语言中plot函数参数含义_plot函数参数

    r语言中plot函数参数含义_plot函数参数plot函数是R语言最基础的函数之一,但是其参数较多,很难记住所有的参数详细用法,这里总结所有参数用法一下,以便查阅。

    2022年10月15日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号