页面上拉加载数据(也就是上拉实现分页)

 之所以发这个博客是因为网上百度了太多  没法直接套用  所以写这个   可以直接套用   先上代码截图

<script type="text/javascript">
//最大页数
var mix = "${pageInfo.pages}";
var page = "${pageInfo.pageNum}";
var rows = "${pageInfo.pageSize}";
var uid = "${uid}";
//标识
var pagenew = 1;


$(function(){
    $(window).scroll(function () {
        if ($(document).height() - $(this).scrollTop() - $(this).height() < 300 && pagenew == 1) {
            pagenew = 2;
            page ++;
            if(page > mix){
                return false;
            }else{
                ajaxpage(uid,page,rows);
            }
        }
    });
});

function ajaxpage(uid,page,rows) {
    $.post("indexx.html",{uid:uid,page:page,rows:rows}, function (data) {
        if(data.is){
            if(data.data.total != 0) {
            	$.each(data.data.list,function(index,item){
            		var detail = "";
            		var conduct= "";
            		var inde= "";
            		var qw= "";
            		if(item.workliststate==1){
            			detail = '<a class="workdes" href="workdetail.html?customerid='+item.cid+'&worklistnumber='+item.worklistnumber+'">';
            			conduct = '<a class="worklistbtn wc_btn" href="workconduct.html?id='+item.id+'&customerid='+item.cid+'">去开工</a>';
            			inde = '<a class="worklistbtn wc_btnfc" href="index.html?wid='+item.id+'&uid='+item.userweiceid+'">废除</a>';
            		};
            		if(item.workliststate==2||item.workliststate==3){
            			detail = '<a class="workdes" href="workconduct.html?id='+item.id+'&customerid='+item.cid+'">';
            		};
            		if(item.workliststate==2){
            			qw = '<input type="hidden" id="workliststatetwo" value="2">'
            				+'<a href="workconduct.html?id='+item.id+'&customerid='+item.cid+'" class="worklistbtn overbtn" onclick="workliststatetwo()">去完工</a>';
            		};
            		if(item.workliststate==3){
            			qw = '<input type="hidden" id="workliststate" value="3">'
            				+'<a href="workconduct.html?id='+item.id+'&customerid='+item.cid+'" class="worklistbtn overbtn" onclick="workliststate()">去完工</a>';
            		};
            		$("#road").append('<li>'
            				+detail
            				+'<div class="workdescon">'
            				+'<p class="work_tit">'+item.customername+'</p>'
            				+'<span class="work_num">工单编号：'+item.worklistnumber+'</span>'
            				+'<span class="work_time">'+new Date(item.createtime).Format("yyyy年MM月dd日 hh:mm:ss")+'</span>'
            				+'</div>'
            				+'</a>'
            				+conduct+inde+qw
            				+'</li>');
            	});
                pagenew = 1;
            }
        }
    },"json");
}
</script>

刚开始有几个参数，我说一下都什么参数

pageInfo.pages是总页数

pageInfo.pageNum是当前页

pageInfo.pageSize是每页的数量

至于下面的uid是我传的参数（这个不用管，根据自己的实际情况来取参传参）

然后这个代码基本上可以套用（但是要和Mybatis的PageHelper的分页插件使用，当然，你不用分页插件也行，手写分页也很厉害，不过建议用插件，因为确实很方便，同时页面上需要的参数都有了）

然后这段代码

$(function(){
    $(window).scroll(function () {
        if ($(document).height() - $(this).scrollTop() - $(this).height() < 300 && pagenew == 1) {
            pagenew = 2;
            page ++;
            if(page > mix){
                return false;
            }else{
                ajaxpage(uid,page,rows);
            }
        }
    });
});

1：就是说   页面文档的高度减去当前滚动条的高度（就是滚动条底部距离屏幕最顶端的距离）和当前高度小于300px和当前页要要是分页的第一页，这些条件满足后，就会执行里面的方法，在这里我不多细说，只能给你说，套用上去就没问题（前提是能看懂js代码，不能代码给你了，什么都看不懂就瞎套，当然后台需要自己写，不会的话可以留言）这些工作做完后，就开始执行js方法

2：就是这个方法

ajaxpage(uid,page,rows);

 

这个方法在上面代码里面写的有，我说一下这个js方法代码的重点，下拉刷新肯定是异步的，所以说要用JQuery的ajax方法，然后把需要显示的数据拼接上去   注意是拼接数据   这里需要用js的forEach循环（不会的话就百度一下），然后把你页面上需要的字段拼接上去，拼接这一步很考验耐心，稍微不注意，页面就炸

3：最后用jQuery的

$("#road").append();
//括号里面写你要往页面上加的数据   也就是拼接的数据    
//至于$("#road")这个就是告诉jQuery往页面上哪个节点（注意是节点）上添加数据  
//如果这个都不懂  那还是先看jQuery的$("").append();方法吧   看明白了再回来看这个 

至此  js已经写完    有很多人会有疑问    那页面上究竟是什么样子的   （怎么去拼接呢？）  那我把页面上的代码也贴出来

<ul class="workul" id="road">
			<c:choose>
			<c:when test="${!empty pageInfo.list}">
			<c:forEach items="${pageInfo.list}" var="item">
			<li>
				
					<c:choose>
					<c:when test="${item.workliststate==1}">
						<a class="workdes" href="workdetail.html?customerid=${item.cid}&worklistnumber=${item.worklistnumber}">
					</c:when>
					<c:when test="${item.workliststate==2||item.workliststate==3}">
						<a class="workdes" href="workconduct.html?id=${item.id}&customerid=${item.cid}">
					</c:when>
					</c:choose>
					<div class="workdescon">
						<p class="work_tit">${item.customername}</p>
						<span class="work_num">工单编号：${item.worklistnumber}</span>
						<span class="work_time"><fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss" /></span>
					</div>
				</a>
				<c:choose>
					<c:when test="${item.workliststate==1}">
						<a class="worklistbtn wc_btn" href="workconduct.html?id=${item.id}&customerid=${item.cid}">去开工</a>
						<a class="worklistbtn wc_btnfc" href="index.html?wid=${item.id}&uid=${item.userweiceid}">废除</a>
					</c:when>
					<c:when test="${item.workliststate==2}">
						<input type="hidden" id="workliststatetwo" value="2">
						<a href="workconduct.html?id=${item.id}&customerid=${item.cid}" class="worklistbtn overbtn" onclick="workliststatetwo()">去完工</a>
					</c:when>
					<c:when test="${item.workliststate==3}">
						<input type="hidden" id="workliststate" value="3">
						<a href="workconduct.html?id=${item.id}&customerid=${item.cid}" class="worklistbtn overbtn" onclick="workliststate()">去完工</a>
					</c:when>
				</c:choose>
			</li>
			</c:forEach>
			</c:when>
			<c:when test="${empty pageInfo.list}">
				<center style="padding:30% 0;color:#999;">你还没有工单哦~</center>
			</c:when>
			</c:choose>
</ul>

注意jsp页面上的C标签   在js里面就不能用C标签去遍历数据  而是要用js的forEach 

至此    页面上拉实现加载数据  就完成了   不过我后台是用分页插件   网页面上发送   pageInfo这个数据  因为分页插件太好用了  分页插件里面每个参数啥意思   我博客里面也有   有看不懂的  可以留言

我把后台写ajax的类也贴上来    这样就真的可以套用了

public class AjaxMessage<T> {
	
	 public AjaxMessage(){}
	 
	 public AjaxMessage(boolean is,String msg,T data){
		 this.msg = msg;
		 this.data = data;
		 this.is = is;
	 }
	
	/**
	 * 提示信息
	 */
	private String msg;
	
	/**
	 * 返回的数�?
	 */
	private T data;
	
	/**
	 * 是否成功
	 */
	private boolean is = false;

然后生成一下get/set方法就行了