分页插件，屏幕滚动ajax加载数据渲染页面
Posted 今天的代码你撸了嘛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分页插件，屏幕滚动ajax加载数据渲染页面相关的知识，希望对你有一定的参考价值。
<link rel="stylesheet" href="yunsuifang/pc-patients/css/dropload.css" />
<style>
.opacity {
webkit-animation: opacity 0.3s linear;
animation: opacity 0.3s linear;
}
@-webkit-keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.opacity {
text-align: left;
}
</style>
<!--主题内容-->
<div class="content" style="margin-bottom: 10px;margin-top: 54px;">
<div class="lists"></div>
</div>
<script>
$(function() {
//入参
var page = 0; //页码
var size = 50; //每页显示条数
var loginUsrId = window.localStorage.getItem("XMIDWARE_APP_USRGUID");
var dropload = $(‘.content‘).dropload({
domDown: {
domClass: ‘dropload-down‘,
domRefresh: ‘<div class="dropload-refresh">↑上拉加载更多</div>‘,
domLoad: ‘<div class="dropload-load"><span class="loading"></span>加载中...</div>‘,
domNoData: ‘<div class="dropload-noData">暂无数据</div>‘
},
scrollArea: window,
loadDownFn: function(me) {
page++;
// 拼接html
var result = ‘‘;
$.ajax({
type: ‘POST‘,
url: ‘https://tsch.fromfuture.cn:7714/GZ/v1/cloud/queryPageHzsfjh?usrguid=‘ + loginUsrId + ‘&pageNo=‘ + page + ‘&pageSize=‘ + size,
//async: false,
timeout: 8000,
success: function(data) {
data = data.trim();
data = data.replace(/\n/g, ‘‘);
data = JSON.parse(data)
console.log(data.data)
var data = data.data;
var result = ‘‘;
if(data.parameterType.length > 0) {
for(var i = 0; i < data.parameterType.length; i++) {
//DOM取数据库数据
var followdatetime = data.parameterType[i].followdatetime;
var name = data.parameterType[i].name;
var deptnam = data.parameterType[i].deptnam;
var followoption = data.parameterType[i].followoption;
var docguid = data.parameterType[i].docguid;
console.log(followoption);
var strs = new Array(); //定义一数组
strs = followoption.split(","); //字符分割
result += `<div class="opacity" style="padding: 0 30px;background: #fff;">
<p class="">
<span class="">日期:</span>
<span class="">${followdatetime}</span>
</p>
<p class="">
<span class="">医生:</span>
<span class=""> ${name} </span>
</p>
<p class="">
<span class="">科室：</span>
<span class="">${deptnam}</span>
</p>
<p style="padding-bottom: 10px;">
<span class="">随访内容：</span>
<span style="width: 77%;margin-top: -3px;" id="followoption">
</span>
</p>
</div>
<p style="margin-top: 13px;background: #fff;padding-top: 11px;padding-bottom: 11px;padding-left: 30px;text-align: right;cursor:pointer;">
<span style="color: #00A8EC;">进入随访诊室</span>
<i class="glyphicon glyphicon-menu-right" style="margin-right: 25px;height: 40px;line-height: 40px;color: #E2E2E2;"></i>
</p>`;
}
$(‘.lists‘).append(result); // 插入数据到页面，放到最后面
for(j = 0; j < strs.length; j++) {
console.log(strs[j]);
var ss = ‘‘;
ss += ‘<i class="icla">‘ + strs[j] + ‘</i>‘;
console.log(ss);
$(‘#followoption‘).append(ss)
}
} else {
tab1LoadEnd = true; // 数据加载完
me.lock(); // 锁定
me.noData(); // 无数据
}
// 为了测试，延迟1秒加载
setTimeout(function() {
me.resetload(); // 每次数据插入，必须重置
}, 1000);
},
error: function(xhr, type) {
console.log(‘Ajax error!‘);
me.resetload(); // 即使加载出错，也得重置
}
});
}
});
$(‘.lists‘).siblings().eq(1).remove();
});
</script>
以上是关于分页插件，屏幕滚动ajax加载数据渲染页面的主要内容，如果未能解决你的问题，请参考以下文章
浅谈jQuery Pagination Ajax 分页插件的使用
Jquery插件类似于datable，但根据需要具有ajax分页和服务器端搜索
JQueryPagination分页插件,ajax从struts请求数据
使用 ajax 分页加载页面后重新初始化其他 javascript 函数