mui上拉加载通过ajax获取数据,实现分页

上拉刷新代码

        $(document).ready(function(){

            //上拉加载下拉刷新
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
                        contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
                        contentrefresh: "正在刷新…", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
                        auto: false,//可选,默认false.首次加载自动下拉刷新一次
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        contentnomore:'我是有底线的',
                        callback: pullupRefresh

                    }
                }
            });
            /**
              * 上拉加载
              */
            function pullupRefresh() {
                setTimeout(function () {
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((isOver)); //参数为true代表没有更多数据了。
                    getData();//ajax
                }, 500);
            }

        });
 var pageStart = 0;//开始数据条数
 var pageSize = 10;//每页显示条数
 var isOver = false;//是否加载完
function getData(){
            var url = requestUrl;
            var _startLimit = pageStart*pageSize;//每次传入后台的数据条数,比如0  10  20 
            var $loadingToast = $('#loadingToast');
            $.ajax({
                type: "get",
                url: url,
                timeout:10000,
                data: {
                    startLimit:_startLimit
                },
                dataType: "json",
                success: function(data) {
                    console.log(data);      
                    if(data.success == true){
                        var list = data.data;

                        for(i in list){
                            str= "";
                            //$(".contentDiv").append(str);
                            jQuery(str).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
                        }
                        //判断是否还有数据,若小于每次加载条数,结束
                        if(list.length < pageSize){
                            isOver = true;
                        }
            //每次加载结束之后,如果还有数据则++
            if(isOver == false){
                pageStart++;
            }
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    console.log("请求失败!!!" + textStatus);
                    $loadingToast.fadeOut(100);
                }
            });
        }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值