jQuery实现下拉加载更多数据代码实现
jQuery实现下拉加载数据在用户进入页面,数据非常的大,发送Ajax的时候就会存在页面卡顿,影响用户的体验,这时候我们就需要通过分页的方式获取数据。这里结合若依的前端AIP进行使用的,前端若依API文档可以点击此访问代码实现在外部可以定义一个我们需要发送的Ajax的data数据,首先我是自己封装了一个Ajax在全局,通过th语法绑定在footer中,然后只要在页面引入这个js就可以使用这个Aja
·
jQuery实现下拉加载数据
在用户进入页面,数据非常的大,发送Ajax的时候就会存在页面卡顿,影响用户的体验,这时候我们就需要通过分页的方式获取数据。这里结合若依
的前端AIP进行使用的,前端若依API文档可以点击此访问
代码实现
在外部可以定义一个我们需要发送的Ajax的data数据,首先我是自己封装了一个Ajax在全局,通过th
语法绑定在footer中,然后只要在页面引入这个js就可以使用这个Ajax;
Ajax的封装:
/**
* $.ajax函数封装获取数据请求
* */
function getData(type,url,data,callback) {
$.ajax({
type: type,
url: prefix + url,
data: data,
success: function (res) { //成功否, back, 服务器端响应度信息
if (res.code == 0) {
callback(res);
}
},
error: function () { //如果错误则错误信息。
$.modal.alertWarning("请求数据失败");
}
})
};
发送分页请求
前端html代码 ,给类选择器
dropload-refresh 设置display:none;
隐藏,后面通过jQuery去进行控制它什么时候显示和隐藏。当数据没有时候,提示用户:“暂无数据”或“到底了”等之类的词语。
<div class="company-detail-list" id="companyDetailList">
<div class="dropload-down loading">
<div class="dropload-refresh more-data">上拉加载更多</div>
<div class="dropload-refresh no-data">暂无数据</div>
</div>
</div>
综合上述内容
下面是一个实现的过程,传递datas1这个对象过去即可!
// 外部定义一个对象,传递到后台
let datas1 = {
pageNum: 1,
pageSize: 14,
total: null
};
/**
* 获取页面数据
* */
function getDetailData() {
if(datas1.total == null ||(((datas1.pageNum-1) * datas1.pageSize )< datas1.total)) {
this.getData('get', '/selectEseByhpyjDeptIdorName', datas1, function (res) {
let rows = res.rows;
datas1.total = res.total;
for (let i = 0; i < rows.length; i++) {
enterpriseId = rows[i].enterpriseId;
$('.company-detail-list').append(`<div class="list-content" οnclick="goListPage()"> <div class="flex-left flex-nowrap">${rows[i].enterpriseName}</div><div class="flex-center">${rows[i].zb}%</div> <div class="flex-right">${rows[i].vcount}/${rows[i].numbers}</div><div class="right-img"><img src="/img/goDetail.png" /></div></div>`);
}
datas1.pageNum++;
$(".more-data").show();
});
}else {
$(".more-data").hide();
$(".no-data").show();
}
}
getDetailData(); // 调用幻术
更多推荐
已为社区贡献2条内容
所有评论(0)