页面内滚动条局部滚动分页div滚动事件 滚动分页 异步滚动分页 ajax滚动

关于滚动事件参考了:http://blog.csdn.net/greenqingqingws/article/details/38018225,谢谢

关于后台的分页可以参考:http://blog.csdn.net/noteless/article/details/50176273

首先介绍下背景:

很简单就是页面内有一个div ,带有滚动条的.

需要实现的功能就是:在这个div内,响应滚动事件,并且异步加载内容.

主要思路:

页面加载后,初始化一次,

后续加载通过滚动事件响应

 

页面上需要有分页信息,

此处使用   隐藏域

 

                <input type="hidden" name="pageNum" id="pageNumId" value='${pageInfo.pageNum}' autocomplete="off" /> 
	        <input type="hidden" name="pages" id="pagesId" value='${pageInfo.pages}'  autocomplete="off"/>
				
					
				<!-- 此div为操作记录容器 -动态生成的列表加载到此处-->
              	<div class="content-scroll"  id="ScrollId">
            	</div>

 

 

关于后台分页此处不多说

后台最后将数据传递到页面

        map.put("List", List);
        map.put("pageInfo", pageInfo);

页面加载后执行js

 

function initNotifyRecord(courseId){

		var _html="";
		var data = {};
                  ...
               data.pageNum = 1;
		
		$.ajax({
			type: "POST",
			url: root+"/web/xxxx.do",
			data:data,
			success: function(result){
					
					 $.each(result.List, function(index, item){
						  _html+='...........'
							   +'......'         
							 
					  });
					//容器添加内容,内容由js拼接而成 				 
				     $("#ScrollId").html(_html);
					//分页信息存入隐藏域
				     $("#pageNumId").val(result.pageInfo.pageNum);
				     $("#pagesId").val(result.pageInfo.pages);
			
			        },
			 error : function() {

 			}
 		});	 

	
}

js执行结束后,隐藏域已经被设置页码以及当前页信息

 

容器也被数据填充

 

后续的数据加载就是响应滚动事件

 

 

$("content-scroll").scroll(function() {

	//var $this =$(this),  
	viewH = $(this).height();//可见高度  
	contentH = $(this).get(0).scrollHeight;//内容高度  
	scrollTop = $(this).scrollTop();//滚动高度  

	var stop = true;

	if (scrollTop == (contentH - viewH)) {
		// 这里加载数据..  

		var _html = '';
		var data = {}; // 查询参数
		var container = $("#ScrollId"); // 加载容器  

		// 当前页  
		var pageNum = parseInt($("#PageNumId").val());
		//总页数
		var pages = parseInt($("#PagesId").val());

		if (pages == pageNum) {
			//不加载
			stop = false;
			return;
		} else {
			pageNum = pageNum + 1;
		}

		
		if (stop == true) {
			stop = false;

			data.pageNum = pageNum;

			$.ajax({
					type : "POST",
					url : root+ "/web/xxx.do",
					data : data,
					success : function(result) {
						_html = '';
						$.each(result.List,function(index,item) {
								_html += '........'


										});

						//判断总页数和当前页数
						var totalPage = result.pageInfo.pages;
						var currentPage = result.pageInfo.pageNum;
                                                //根据再次的查询信息,把分页信息写入
                                               $("#pageNumId").val(currentPage);
						$("#pagesId").val(totalPage);

						container.append(_html);

						stop = true;
					},
					error : function() {

					}
			});
		}

	}
});

这样子就实现了,滚动加载原理很简单

 

页面存入页码信息(通过隐藏域)

响应滚动事件,根据页码,重新请求页码

请求到的数据append到div内