offset用法(滑动加载)

12 篇文章 0 订阅
4 篇文章 0 订阅

第一:select * from table limit 10,5;                 

//含义是跳过10条取出5条数据,limit后面是从第10条开始读,读取5条信息,即读取5条数据

第二: select * from table limit 10 offset 5;      

//含义是从第5条(不包括)数据开始取出10条数据,limit后面跟的是10条数据,offset后面是从第5条开始读取,即读取第6--10条

第一个就不用多说了,今天主说下第二个offset的用法(分页),直接上代码:

 

从加载中,到暂无数据(滑动加载)

页面JS

<script>
    $(function(){
        var itemIndex = 0;
        var tab1LoadEnd = false;
        var page = 1;
        var type = '<?php echo Yii::$app->request->get("type") ? Yii::$app->request->get("type") : 1 ?>';

        // tab
        $('.gtable').on('scroll',function(){
            var $this = $(this);
            itemIndex = $this.index();
            // // 如果数据没有加载完
            if(!tab1LoadEnd){
                // 解锁
                dropload.unlock();
                dropload.noData(false);
            }else{
                // 锁定
                dropload.lock('down');
                dropload.noData();
            }
            // 重置
            dropload.resetload();
        });

        // dropload
        var dropload = $('#blockBuy').dropload({
            scrollArea : window,
            loadDownFn : function(me){
                // 加载菜单一的数据
                page++;
                var $url = '/trade/showadd.html?pay_type='+ type +'&page='+ page;
                $.ajax({
                    type: 'GET',
                    url: $url,
                    dataType: 'json',
                    success: function(data){
                        if(data.data != null && data.data.length > 0){
                            var result = '';
                            for(var i = 0; i < data.data.length; i++) {
                                result += '<li class="reitem"><div class="reile"><img src="/<?php echo $user_info['icon']; ?>" alt="" class="reilimg" /></div><div class="reilr"><p class="reilt"><span class="reilte"><?php echo $user_info['username']; ?></span><span class="reiltr on">' + data.data[i]['amount'] + '</span></p><p class="reilt"><span class="reilte">UID:<?php echo $user_info['userid']; ?></span><span class="reiltr">' + data.data[i]['created_at'] + '</span></p></div></li>';
                            }
                        }else{
                            // 数据加载完
                            tab1LoadEnd = true;
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试,延迟1秒加载
                        setTimeout(function(){
                            $('.lists').eq(itemIndex).append(result);
                            // 每次数据加载完,必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(err){
                        //alert('Ajax error!');
                        // 即使加载出错,也得重置
                        // me.resetload();
                    }
                });
            }
        });
    });
</script>

控制器

    public function actionShowrecord () {
        $this->layout = false;
        $type = HtmlPurifier::process(Yii::$app->request->get('type'));
        $userid = Yii::$app->user->id;
        $key = $userid."language";
        $lang = Yii::$app->cache->get($key);
        if($type == 1) {
            $event_type = 33;
            $wallet_type = 3;
            $html_type = 'fudou_record';
        } elseif ($type ==2) {
            $event_type = 34;
            $wallet_type = 4;
            $html_type = 'fubi_record';
        } else {
            echo "<script>alert('类型错误')</script>";
            exit;
        }
        $record = WB_UserWalletRecord::getMyRecord($userid,$event_type,$wallet_type);
        if($type == 1){
            $sendType = Yii::t("app","福豆记录");
        }else if($type == 2){
            $sendType = Yii::t("app","福币记录");
        }else{
            echo "<script>alert('类型错误')</script>";
            exit;
        }
        $user_info = WB_UserProfile::find()->where(['userid'=>$userid])->one();
        return $this->render('fudou_record',["record" => $record, 'title' => $sendType,'lang'=>$lang,'user_info'=>$user_info]);
    }
    //  转让福豆记录列表加载
    public function actionShowadd(){

        $userid = Yii::$app->user->id;
        $type = HtmlPurifier::process(Yii::$app->request->get('pay_type'));
        if($type == 1) {
            $event_type = 33;
            $wallet_type = 3;
        } elseif ($type ==2) {
            $event_type = 34;
            $wallet_type = 4;
        } else {
            echo "<script>alert('类型错误')</script>";
            exit;
        }
        // 获取订单列表
        $tradeList = WB_UserWalletRecord::getMyRecord($userid,$event_type,$wallet_type);
        return json_encode($tradeList, true);
    }

model

public static function getMyRecord($userid,$event_type,$wallet_type) {
        $query = WB_UserWalletRecord::find()->where("userid = :userid",[":userid"=>$userid])->orderBy("created_at desc");
        if ($event_type > 0) {
            $query->andFilterWhere(["=","event_type",$event_type]);
        }
        if ($wallet_type > 0) {
            $query->andFilterWhere(["=","wallet_type",$wallet_type]);
        }
        $countQuery = clone $query;
        $pagesize = 10;
        $pager = new \yii\data\Pagination(['totalCount' => $countQuery->count(), 'defaultPageSize' => $pagesize]);
        $offset = (Yii::$app->request->get("page")-1)*$pagesize;
        $limit = Yii::$app->request->get("limit",$pagesize);
        $res = $query->offset($offset)->limit($limit)->asArray()->all();
        $temp=[];
        foreach($res as $item){
            $temp[]=[
                "created_at"=>date("Y/m/d",$item['created_at']),
                "event_type"=> self::$event_type[$item["event_type"]],
                "amount"=>$item["pay_type"]==1?$item["amount"]:"-".$item["amount"],
                "wallet_type"=>self::$wallet_type[$item["wallet_type"]],
            ];
        }
        return ["pager" => $pager, "data" => $temp];
    }

至此就完成了滑动加载效果,每次加载10条(向上滑动一次多加载10条,直到加载出所有)。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

騒周

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值