Mui下拉刷新上拉加载，后台java

//下拉刷新（单webview模式）

//html
<div class="mui-content" id="refreshContainer">
    <ul class="mui-table-view" id="muiTableView">

    </ul>
</div>
//js

mui.init({
  pullRefresh : {
    container:"#refreshContainer",//下拉刷新容器标识
    down : {
      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
      height:'50px',//可选,默认50px.下拉刷新控件的高度,
      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
      offset:'45px', //可选 默认0px,下拉刷新控件的起始位置
      auto: true,//可选,默认false.首次加载自动上拉刷新一次
      callback :function(){
	    //获取会员id
	    var token = localStorage.getItem("token");	
	    mui.ajax(baseUrlx + '/androidQuestionBankController/viewPracticeRecord',{
	    	data:{
	    		token:token
	    	},
	    	dataType:'json',//服务器返回json格式数据
	    	type:'post',//HTTP请求类型
	    	timeout:10000,//超时时间设置为10秒；
	    	success:function(data){
	    		var table = document.getElementById("muiTableView");
	    		var html = '';
	    		//k索引 ,v 对象
	    		mui.each(data.list, function(k, v){
	    			html += '<li class="mui-table-view-cell" data-id="'+v.id+'">';
	    			html += '<div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red">删除</a></div>';
	    			html += '<a class="mui-navigate-right mui-slider-handle">';
	    			html += '<div>'+v.examName+'</div><span>'+v.createTime+'，共'+v.allNumber+'题，做对'+v.correctNumber+'道，正确率'+v.correctRate+'%</span>';
	    			html += '</a>';
	    			html += '</li>';
	    		})
	    		table.innerHTML = html;
	    		
				setTimeout(function(){
				//没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
     			mui('#refreshContainer').pullRefresh().endPulldown();	
     			//重置上拉刷新
     			//mui('#refreshContainer').pullRefresh().refresh(true);
	     			if(data.list.length < 10){
	    				//禁用上拉刷新
	    				mui('#refreshContainer').pullRefresh().disablePullupToRefresh();	     				
     				}else{
		       			//启用上拉刷新
		     			mui('#refreshContainer').pullRefresh().enablePullupToRefresh();   					
     				}
				},500)
				
	    	},
	    	error:function(xhr,type,errorThrown){
	    		console.info(type)
	    	}
	    });      	
      	
      	
      }
    },
    up : {
      height:50,//可选.默认50.触发上拉加载拖动距离
      auto:false,//可选,默认false.自动上拉加载一次
      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
      callback :function(){
      	var ids = "";
         $('.mui-table-view-cell').each(function(key,value){
			//获取练习记录id
			var id = $(this).attr("data-id");
			if(ids == ""){
				ids = id;
			}else{
				ids = ids + "," + id;
			}
        });
        console.info(ids)
	    //获取会员id
	    var token = localStorage.getItem("token");	
	    mui.ajax(baseUrlx + '/androidQuestionBankController/viewPracticeRecordUpToRefresh',{
	    	data:{
	    		token:token,
	    		ids:ids,
	    	},
	    	dataType:'json',//服务器返回json格式数据
	    	type:'post',//HTTP请求类型
	    	timeout:10000,//超时时间设置为10秒；
	    	success:function(data){
	    		console.info(data.list.length == 0)
	    		var table = document.getElementById("muiTableView");
	    		var html = '';
	    		//k索引 ,v 对象
	    		mui.each(data.list, function(k, v){
	    			html += '<li class="mui-table-view-cell" data-id="'+v.id+'">';
	    			html += '<div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red">删除</a></div>';
	    			html += '<a class="mui-navigate-right mui-slider-handle">';
	    			html += '<div>'+v.examName+'</div><span>'+v.createTime+'，共'+v.allNumber+'题，做对'+v.correctNumber+'道，正确率'+v.correctRate+'%</span>';
	    			html += '</a>';
	    			html += '</li>';
	    		})
	    		table.innerHTML += html;
	    		
	    		if(data.list.length < 10){
	    			//true表示没有更多数据了
	    			mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
	    			setTimeout(function(){
	    				//禁用上拉刷新
	    				mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
	    			},1000)
	    		}else{
					//1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：	
	     			mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);	    			
	    		}

				
	    	},
	    	error:function(xhr,type,errorThrown){
	    		console.info(type)
	    	}
	    });      	
      	
      	
      }
    }    
  }
});	

//java
//controller层

	@Autowired
	private AndroidQuestionBankService androidQuestionBankService;

	/**
	 * 练习记录
	 * */
	@RequestMapping("/viewPracticeRecord")
	@ResponseBody
	public Map<String,Object> viewPracticeRecord(String token){
		return androidQuestionBankService.viewPracticeRecord(token);
	}	
	/**
	 * 练习记录
	 * 上拉加载更多
	 * */
	@RequestMapping("/viewPracticeRecordUpToRefresh")
	@ResponseBody
	public Map<String,Object> viewPracticeRecordUpToRefresh(String token,String ids){
		return androidQuestionBankService.viewPracticeRecordUpToRefresh(token,ids);
	}

//service 接口
Map<String, Object> viewPracticeRecord(String token);
Map<String, Object> viewPracticeRecordUpToRefresh(String token, String ids);
//serviceImpl  接口的实现类
	
	/**
	 * 练习记录
	 * */
	@Override
	public Map<String, Object> viewPracticeRecord(String token) {
		Map<String,Object> map = new HashMap<>();
		SxMember member = sxMemberMapper.selectByPrimaryKey(Integer.parseInt(token));
		SxMyQuestionExample myQuestionExample = new SxMyQuestionExample();
		myQuestionExample.setPageSize(10);
		myQuestionExample.setOrderByClause("create_time desc");
		com.elven.member.pojo.SxMyQuestionExample.Criteria myQuestion_c = myQuestionExample.createCriteria();
		myQuestion_c.andMemberIdEqualTo(member.getId());
		List<SxMyQuestion> myQuestionExamList = sxMyQuestionMapper.selectByExample(myQuestionExample);
		List<AndroidPracticRecordModel> list = new ArrayList<>();
		for (SxMyQuestion sxMyQuestion : myQuestionExamList) {
			AndroidPracticRecordModel androidPracticRecordModel = new AndroidPracticRecordModel();
			androidPracticRecordModel.setId(sxMyQuestion.getId());//练习记录id
			SimpleDateFormat format = new SimpleDateFormat("yyyy.MM.dd");
			androidPracticRecordModel.setCreateTime(format.format(sxMyQuestion.getCreateTime()));
			androidPracticRecordModel.setExamName(sxMyQuestion.getCategoryExamQuestionName());
			String[] split1 = sxMyQuestion.getQuestionId().split(",");
			String[] split2 = sxMyQuestion.getRightOrWrong().split(",");
			int x = 0;
			for (String str : split2) {
				if((int)Integer.valueOf(str) == 1) {
					x++;
				}
			}
			//计算这组习题的正确率
			BigDecimal accuracy = new BigDecimal(x).divide(new BigDecimal(split1.length),2,BigDecimal.ROUND_DOWN).multiply(new BigDecimal(100));			
			androidPracticRecordModel.setAllNumber(split1.length);
			androidPracticRecordModel.setCorrectNumber(x);
			androidPracticRecordModel.setCorrectRate(accuracy);
			list.add(androidPracticRecordModel);
		}
		
		map.put("list", list);
		return map;
	}
	/**
	 * 练习记录
	 * 上拉加载更多
	 * */	
	@Override
	public Map<String, Object> viewPracticeRecordUpToRefresh(String token, String ids) {
//获取页面原有数据的id
		List<Integer> listIds = new ArrayList<>();
		if(ids != null && !ids.equals("")) {
			String[] split = ids.split(",");
			for (String str : split) {
				listIds.add(Integer.valueOf(str));
			}
		}
		Map<String,Object> map = new HashMap<>();
		SxMember member = sxMemberMapper.selectByPrimaryKey(Integer.parseInt(token));
		SxMyQuestionExample myQuestionExample = new SxMyQuestionExample();
		myQuestionExample.setPageSize(10);
		myQuestionExample.setOrderByClause("create_time desc");
		com.elven.member.pojo.SxMyQuestionExample.Criteria myQuestion_c = myQuestionExample.createCriteria();
		myQuestion_c.andMemberIdEqualTo(member.getId());
//andIdNotIn();方法不查id为这些的数据
		myQuestion_c.andIdNotIn(listIds);
		List<SxMyQuestion> myQuestionExamList = sxMyQuestionMapper.selectByExample(myQuestionExample);
		List<AndroidPracticRecordModel> list = new ArrayList<>();
		for (SxMyQuestion sxMyQuestion : myQuestionExamList) {
			AndroidPracticRecordModel androidPracticRecordModel = new AndroidPracticRecordModel();
			androidPracticRecordModel.setId(sxMyQuestion.getId());//练习记录id
			SimpleDateFormat format = new SimpleDateFormat("yyyy.MM.dd");
			androidPracticRecordModel.setCreateTime(format.format(sxMyQuestion.getCreateTime()));
			androidPracticRecordModel.setExamName(sxMyQuestion.getCategoryExamQuestionName());
			String[] split1 = sxMyQuestion.getQuestionId().split(",");
			String[] split2 = sxMyQuestion.getRightOrWrong().split(",");
			int x = 0;
			for (String str : split2) {
				if((int)Integer.valueOf(str) == 1) {
					x++;
				}
			}
			//计算这组习题的正确率
			BigDecimal accuracy = new BigDecimal(x).divide(new BigDecimal(split1.length),2,BigDecimal.ROUND_DOWN).multiply(new BigDecimal(100));			
			androidPracticRecordModel.setAllNumber(split1.length);
			androidPracticRecordModel.setCorrectNumber(x);
			androidPracticRecordModel.setCorrectRate(accuracy);
			list.add(androidPracticRecordModel);
		}
		
		map.put("list", list);
		return map;
	}