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

最新推荐文章于 2024-04-28 16:24:30 发布

中庭地白树栖鸦

最新推荐文章于 2024-04-28 16:24:30 发布

阅读量3.9k

点赞数

分类专栏： ajax 文章标签： jquery ajax sql

本文链接：https://blog.csdn.net/dongzhongyan/article/details/52622816

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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+' &nbsp;&nbsp;&nbsp;&nbsp;</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+' &nbsp;&nbsp;&nbsp;&nbsp;</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 ;

中庭地白树栖鸦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
滚动条滚动到底部加载其他数据（Jquery+ajax）

/*js*/$(function(){ getData(); var winH = $("#div1").height(); //页面可视区域高度 var scrollHandler = function () { var pageH = $(document.body).height(); //当前文档总高度
复制链接

扫一扫

专栏目录