您的位置：首页 > Web前端 > JQuery

滚动条滚动到底部加载其他数据（Jquery+ajax）

2016-09-22 14:35 633 查看

jsp

/*js*/
//*******************核心代码***************************
$(function(){
getData(); //初始获取数据，加载数据事件
var winH = $("#div1").height(); //页面可视区域高度
var scrollHandler = function () {
var pageH = $(document.body).height(); //当前文档总高度
var scrollT = $("#div1").scrollTop(); //滚动条top的值
var aa = (pageH - winH - scrollT) / winH;
var dijian = parseInt($("#dijian").val());
if (aa < dijian) {
$("#dijian").val((dijian-2));
getData();//到底部获取数据
}
setTimeout(function(){},1000)
}
//鼠标滚动事件
$("#div1").scroll(scrollHandler);
//********************END***************************
})
function getData() {
var pagenumber = $("#pagenumber").val();
var pagesize = $("#gPageSize").val();
var autobatchId = '${requestScope.autobatch.AUTOBATCH_ID }';
if(pagenumber=="0"){
pagenumber=1;
$("#pagenumber").val(pagenumber);
}else{
pagenumber=parseInt(pagenumber)+parseInt(50); //页码自动增加，保证下次调用时为新的一页。
pagesize=parseInt(pagesize)+parseInt(50);
$("#pagenumber").val(pagenumber);
$("#gPageSize").val(pagesize);
}
$.ajax({
type: "post",
url: "specifiedData.do",
data:{"pagenumber":pagenumber,"pagesize":pagesize,"autobatchId":autobatchId},
success: function (data) {
insertDiv(data);
}
});
}
function insertDiv(map){
var json=map.list;
var $mainDiv = $("#loaddata");
var html = '';
for (var i = 0; i < json.length; i++) {
if(json[i].namecn!=null){
html+='<div><span style="display: inline;" id='+json[i].datasourcetable_ID+' onmouseover="showthis(this);">'+json[i].namecn+'     </span><span id='+json[i].datasourcetable_ID+' class="showgoods" style="display:none;cursor:pointer;" onclick="delrel(this);">×</span></div>';
}else if(json[i].namecn==null){
html+='<div><span style="display: inline;" id='+json[i].datasourcetable_ID+' onmouseover="showthis(this);">'+json[i].aliascn+'     </span><span id='+json[i].datasourcetable_ID+' class="showgoods" style="display:none;cursor:pointer;" onclick="delrel(this);">×</span></div>';
}
}
$mainDiv.append(html);
}
/*html部分*/
<body>
<input type="hidden" name="pagesize" id="gPageSize" value="50">
<input type="hidden" name="pagenumber" id="pagenumber" value="0">
<div id="div1">
<div id="loaddata">
</div>
</div>
</body>

controller层

@RequestMapping("specifiedData")
@ResponseBody
public Object specifiedData(HttpServletRequest request,String pagenumber,String pagesize,String autobatchId){
Map<String, Object> map=new HashMap<String, Object>();
map.put("pagenumber", pagenumber);
map.put("pagesize", pagesize);
map.put("autobatchId", autobatchId);
List<Object> list=new ArrayList<Object>();
list=datasourcetableService.selectspecifiedData(map);
map.put("list", list);
return map;
}

sql语句

select a.* from ( select d.*, rownum rn from table d where d.BATCH_ID=?)a where rn between 51 AND 100 ;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery ajax sql

相关文章推荐

新的分享

章节导航