不想分页怎么办？？-->页面数据的滚动加载

最新推荐文章于 2023-04-25 17:07:03 发布

dmnil82222

最新推荐文章于 2023-04-25 17:07:03 发布

阅读量184

点赞数

原文链接：http://www.cnblogs.com/guxiong/p/8547827.html

版权

在前几天的一次前台数据展示的时候

为了更好的用户的体验

就想着做一个数据的滚动加载功能

于是简单的查询了网上的实现方式

基本都是在页面加载的时候绑定scroll事件

然后判断页面触底的时候

进行ajax请求获取数据

然后将数据追加到数据展示层的div后面

于是也找了几个demo看了看

决定自己动手把这个功能实现

直接看代码吧

代码中注释也很详细：

 $(document).ready(function(){  
        //页面加载的时候绑定触底滚动加载事件
        $(window).bind('scroll',function(){show()});  
        function show() {
            //获取页面首次加载时设置在隐藏文本框中的当前页的值
            //在页面会有两个隐藏的文本框 
            //<input type="hidden" id="currentPage" value="${currentPage }">  当前页
            //<input type="hidden" id="totalPage" value="${totalPage }">  进入该页面的时候把总页数放到该隐藏域中
            var currentPage = $('#currentPage').val();
            //获取页面首次加载时设置在隐藏文本框中的总页数值
            var totalPage = $('#totalPage').val();
            //如果当前页小于总页数 就进入判断
               if(currentPage <= totalPage) {
                   //判断页面是否已经触底 如果触底就调用ajaxRead()方法来进行下一页数据的加载  并将当前页和总页数传过去
                   if($(window).scrollTop()+$(window).height()>=$(document).height())  { 
                       ajaxRead(currentPage, totalPage);  
                }
               } else {
                   //取消绑定scroll滚动事件
                   $(window).unbind('scroll');
                   //如果数据加载完毕 在blog-main Div后面追加提示语
                   $('#blog-main').append("<div style='text-align: center;'><h3>拼命更新数据中。。。。。。</h3></div>");
               }
        }
        function ajaxRead(currentPage, totalPage) {
            var html= "";  
            $.ajax({  
                  type:'get',  
                  url:'portal/scrollLoad', 
                  data:{currentPage: currentPage,totalPage:totalPage},
                  success: function(data){
                      //获取后台传过来的年鉴列表
                      var list = eval(data.yearBookJson);
                      //遍历年鉴列表数据
                      for (var i = 0; i < list.length; i++) {
                        html = "<div class='col-md-4 col-sm-4'><article class='blog-teaser'><header>";
                        html = html + "<img style='width: 326px;height: 135px;' src='<%=basePath%>uploadFiles/uploadImgs/";
                        html = html + list[i].YEARBOOK+"' alt="+list[i].YEARBOOKNAME;
                        html = html + "'><h3><a href='portal/nianjiandetail?YEARBOOK_ID="+list[i].YEARBOOK_ID;
                        html = html + "'>"+list[i].YEARBOOKNAME;
                        html = html + "</a></h3><hr></header></article></div>";
                        //在yearBookBox Div后追加拼接的HTML代码
                        $('#yearBookBox').append(html);
                      } 
                      //隐藏文本框中的当前页的值
                      var ajaxchange = $('#currentPage').val();
                      //本次加载完后隐藏文本框里的当前页的值需要加1 为下一次调用准备
                      $('#currentPage').val(parseInt(ajaxchange)+1);
                  }
            });  
        }
    });