jquery实现滑动到底部加载下一页的数据

最新推荐文章于 2022-06-29 14:30:15 发布

风动我不动

最新推荐文章于 2022-06-29 14:30:15 发布

阅读量1.1k

点赞数

分类专栏： jQuery 文章标签：分页滑动底部加载 js

本文链接：https://blog.csdn.net/qq_35319611/article/details/81112079

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文主要介绍了jQuery滑动到底部加载下一页数据的实例代码,需要的朋友可以参考下，希望能帮助到大家。（主要是自己想记录下，下次自个儿用好找点。实诚脸）

具体实现代码如下。

html文件

<body>
       
       <div id="list"></div>
   </body>
   <script src="static/js/jquery-2.1.4.js"></script>
   <script src="static/js/jquery.scrollLoad.js"></script>
   <script>
       $(function(){
           queryList(); // 查询列表方法
       });
       function queryList(){
           $("#list").load({
               url :"/numberPool/findList",// 后台提供数据的地址
               datas : {
                   name:"参数值"
               },
               callback : function(data) {
                   // 判断返回值是否存在
                   if(data!="undefined"){
                       console.log(data.length);
                       if(data.length>0){
                           var html = '';
                           // 遍历，点出来的值为后台传过来的数据名相等
                           $.each(data, function(i, item){
                               html += '<a href="javaScript:;"><div class="weui-grid__icon">'+item.value+'</div></a>';
                           });
                       }else{
                           var html = '<div class="hint_text">当前没有数据~</div>';
                       }
                   }else{
                       var html = '<div class="hint_text">当前没有数据~</div>';
                   }
                   return html;
               }
           });
       }
   </script>

js文件（忘记从哪下载的已经封装好的emmmmm，感谢封装的大大）

/**
*  * @param $
*/
(function($) {
   $.fn.load = function(options) {
       options.container = this.selector;
       this.load.options = $.extend({}, this.load.options, {
           pages : 1,
           pageNumber : 1
       }, {dataLoad : false}, options || {});
       $(this.selector).html("");
       var loadingHtml = '<div id="list_cloading" style="text-align:center;display:none;"><img style="width: 30px; margin: 10px auto;" src="/static/images/imgs/loading.gif" /></div>';
       $(options.container).append(loadingHtml);
       try {
           var loadingImage = new Image();
           loadingImage.src = '/static/images/weixiao/imgs/loading.gif';
           loadingImage.onload = function() {
               if (loadingImage.complete == true) {
                   if (loadingImage)
                       $.fn.load.options.getMore();
               }
           }
       } catch (e) {
           this.getMore();
       }
   };

   $.fn.load.options = {
       pageNumber : 1,
       pageSize : 20,
       pages : 1,
       rowCount : 0,
       url : "",
       dataLoad : false, // 数据是否正在加载
       datas : {},
       container : "",
       async : true,
       callback : function() {
       },
       complete : function(){
       },
       getMore : function() {
           if(this.dataLoad){
               return false;
           }
           $.fn.load.options.dataLoad = true;
           if (this.pageNumber > this.pages) {
               return;
           }
           try{
               $.ajax({
                   url : this.url,
                   type : "POST",
                   dataType : "JSON",
                   async : $.fn.load.options.async,
                   timeout : 60000,
                   data : $.extend(true, this.datas, {
                       pageNo : this.pageNumber,
                       pageSize : this.pageSize
                   }),
                   beforeSend : function(xmlHttpRequest) {
                       $("#list_cloading").show();
                   },
                   success : function(data) {
                       if (data) {
                           if ((typeof data) == 'string') {
                               data = $.parseJSON(data);
                           }
                           $.fn.load.options.pages = data.totalpage;
                           $.fn.load.options.rowCount = data.count;
                           var dataList = data.list;
                           var htmls = $.fn.load.options.callback(dataList);
                           $($.fn.load.options.container + " #list_cloading").before(htmls);
                           // 当没有返回pages的时候，将最后一次加载出的数据和pageSize比较，得出pages
                           if (!$.fn.load.options.pages && dataList && dataList.length < $.fn.load.options.pageSize) {
                               $.fn.load.options.pages = $.fn.load.options.pageNumber;
                           }
                           $.fn.load.options.pageNumber++;
                       }
                   },
                   // XMLHttpRequest, textStatus
                   complete : function(XMLHttpReq, status){
                       $("#list_cloading").hide();
                       if($.fn.load.options.complete){
                           $.fn.load.options.complete(XMLHttpReq, status);
                       }
                       $.fn.load.options.dataLoad = false;
                   }
               });
           }catch(e){
               $.fn.load.options.dataLoad = false;
           }
       }
   };

   $(window).scroll(function() {
       if ($(document).scrollTop() > 0 && ($(document).scrollTop() + $(window).height() + 100 >= $(document).height())) {
           $.fn.load.options.getMore();
       }
   });
})(jQuery);

Java文件需要：

传入值为：

public JSONObject findList(HttpServletRequest request,int pageNo,int pageSize) {

返回值为：

jsonObject.put("list",list.getData() );（一个集合数据）
jsonObject.put("totalpage",list.getPaging().getTotalPage() );
jsonObject.put("count",list.getPaging().getRowCount() );

风动我不动

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jquery实现滑动到底部加载下一页的数据

本文主要介绍了jQuery滑动到底部加载下一页数据的实例代码,需要的朋友可以参考下，希望能帮助到大家。（主要是自己想记录下，下次自个儿用好找点。实诚脸）具体实现代码如下。html文件&lt;body&gt; &lt;!-- 列表 --&gt; &lt;div id="list"&gt;&lt;/div&gt; &lt;/body&gt; ...
复制链接

扫一扫