之所以发这个博客是因为网上百度了太多 没法直接套用 所以写这个 可以直接套用 先上代码截图
<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方法就行了