I found some examples on the Internet. But I have been encountering problems. The following is a combination of online examples and I have changed something. The pagination function can be realized. Here is a pit I encountered. The css style may affect the effect of paging. If you encounter You can’t break the page. You can comment the css style and try it out. If the page break works, it means that there is a problem with the css style (the reason why my paging can’t be used is because there is an html, body in the css style), so don’t worry about it. The code:
js************************************************** **Need to introduce dropload.min.js, which can be downloaded online
<script>
$(document).ready(function(){ //load page load(); }); function load() { var num = 4; var counter1 = 1; var dropload = $('.assess') .dropload({ scrollArea:window, loadDownFn:function(me){ // Load the "recommended doctor" data $.ajax({ url:'getDAListByUserId?nowpage="+counter1+"pageSize="+num, type: 'GET ', success: function (data) { var data = JSON.parse(data) var datas=data.content.content;
var html="";
var html3="";
var length=datas.length;
if(length==0){ me.lock(); // no data me.noData(); me.resetload(); if (counter1 ==1){ $(".dropload-down").css("display","none");//text with no more data } }else{ $(".dropload-load"). show(); counter1++;
for(var i=0;i<length;i++){
var evaluate='';
if(datas[i].status==1){
evaluate='<span class="right go" title="'+datas[i].id+'">去评价</span>';
html3= '<ul class="add" title="'+datas[i].id+'">';
}else if(datas[i].status==2){
evaluate='<span class="right right2" title="'+datas[i].id+'">已评价</span>';
html3='<ul class="detail" title="'+datas[i].id+'">';
}
html+='<div class="assess-main">'+
'<p class="time">'+
'<span class="left">'+datas[i].dateCreate+'</span>'+
evaluate+
'</p>'+
html3+
'<li><span>看诊医生：</span><span>'+datas[i].doctorName+'</span><span class="doctor">'+datas[i].doctorTitle+'</span></li>'+
'<li><span>就诊机构：</span><span>'+datas[i].workUnit+'</span></li>'+
'<li><span>就诊人：</span><span>'+datas[i].patientName+'</span></li>'+
'</ul>'+
'</div>'
if(length < 4 && i ==(length-1)){//Indicates that a page is not full and there is no data
// lock
me.lock();
// no data
me.noData() ;
break;
}
}
$(".assess1").append(html)
// me.noData();
//me.unlock();
me.resetload();
};
},
error: function (xhr, type) { // Even if there is an error loading, me.resetload() must be reset; } }); } }); } </script>
css****************************************css needs to add the following code
/* dropload插件样式 */
.dropload-up,.dropload-down{
position: relative;
height: 0;
overflow: hidden;
font-size: 12px;
/* 开启硬件加速 */
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
.dropload-down{
height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
height: 50px;
line-height: 50px;
text-align: center;
}
.dropload-load .loading{
display: inline-block;
height: 15px;
width: 15px;
border-radius: 100%;
margin: 6px;
border: 2px solid #666;
border-bottom-color: transparent;
vertical-align: middle;
-webkit-animation: rotate 0.75s linear infinite;
animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
Backstage**************************
The background only needs to do paging processing. The parameters passed by the front end are the current page and the number of items displayed on each page.