頁面上拉載入資料(也就是上拉實現分頁)
之所以發這個部落格是因為網上百度了太多 沒法直接套用 所以寫這個 可以直接套用 先上程式碼截圖
<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這個資料 因為分頁外掛太好用了 分頁外掛裡面每個引數啥意思 我部落格裡面也有 有看不懂的 可以留言