jQuery 拉动滚动条到底部加载数据

向右看齐 2022-04-14 02:42 316阅读 0赞

代码很简单：

/**  
        		  * 判断滚动条是否到最底端的方法 
        		  * @param Element obj 
        		  */    		
        		function isScrollBottom(obj) {
    				if (obj.scrollTop + obj.clientHeight === obj.scrollHeight) {
    					return true;
    				} else {
    					return false;
    				}
    			}
    			
    			$(function(){
    				/**
    				  *绑定滚动事件
    				  */
    				$('#assDiv').scroll(function(e) {
    					if (isScrollBottom(this)) {
    							// 滚动到底端了TODO加载内容
    							ajaxShow();
    						} else {
    							// 没有滚动到底端TODO 其他处理
    						}		
    				});
    			});

例子：

信息显示类别代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
    <%@ taglib prefix="s" uri="/struts-tags"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
    <%
    	String path = request.getContextPath();
    %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    	    <meta http-equiv="pragma" content="no-cache"/>
    	    <meta http-equiv="cache-control" content="no-cache"/>
    	    <meta http-equiv="expires" content="0"/>
    		<link href="<%=path %>/style/base/admin_style.css" rel="stylesheet" type="text/css" />
        	<link rel="stylesheet" href="<%=path %>/style/common/lightbox.css" type="text/css"></link>
        	<script type="text/javascript" src="<%=path %>/style/common/jquery-1.7.min.js"></script>
        	<script type="text/javascript">
        		/**  
        		  * 判断滚动条是否到最底端的方法 
        		  * @param Element obj 
        		  */    		
        		function isScrollBottom(obj) {
    				if (obj.scrollTop + obj.clientHeight === obj.scrollHeight) {
    					return true;
    				} else {
    					return false;
    				}
    			}
    			
    			$(function(){
    				/**
    				  *绑定滚动事件
    				  */
    				$('#assDiv').scroll(function(e) {
    					if (isScrollBottom(this)) {
    							// 滚动到底端了TODO加载内容
    							ajaxShow();
    						} else {
    							// 没有滚动到底端TODO 其他处理
    						}		
    				});
    			});
    			
    			function ajaxShow(){
    				var currPage = $("#currPage").val();
    				var pageCount = $("#pageCount").val(); 
    				//下一页 小于 总页数的时候，查询数据
    				if(currPage <=  pageCount){
    					 $.post("<%=path %>/cxtj/cxtj_scrollAssList.action",$("#editForm").serialize(),function(result){
    						 if(result.length > 1){
    						 	var jsonData = eval('(' + result + ')');
    						 	var currPage = jsonData.currPage;
    						 	//保持当前页
    						 	$("#currPage").val(currPage);
    						 	
    						 	var assArry = jsonData.data;
    						 	$.each(assArry,function(key,obj){
    						 		var len = $("#assTable tr:not(:first)").length;
    								var tr = '<tr>';   
    									tr += '<td height="24" align="center" bgcolor="#FFFFFF">'+parseInt(len+1)+'</td>';
    									tr += '<td bgcolor="#FFFFFF">'+obj.assNo+'</td>';
    									tr += '<td bgcolor="#FFFFFF">'+obj.assName+'</td>';
    									tr += '<td bgcolor="#FFFFFF">'+obj.assModel+'</td>';
    									tr += '<td bgcolor="#FFFFFF" align="center">'+obj.zcfl+'</td>';
    									tr += '<td bgcolor="#FFFFFF" align="center">'+obj.departmentnoName+'</td>';
    									tr += '<td bgcolor="#FFFFFF">￥'+obj.assValue+'</td>';
    									tr += '<td bgcolor="#FFFFFF" align="center">'+obj.assUsedate+'</td>';
    									tr += "</tr>";
    								$(tr).insertAfter($("#assTable tr:last"));
    							});
    						 }
    					});
    				}
    			}
        		
        	</script>
    		 
    	</head>
    	<body>
    		 <s:form id="editForm" name="editForm" namespace="/cxtj" action="cxtj_scrollAssList" method="post"  >
    			 <input type="hidden" name="ass.assNo" value="<s:property value="ass.assNo" />" />
    			 <input type="hidden" name="ass.assName" value="<s:property value="ass.assName" />" />
    			 <input type="hidden" name="ass.assModel" value="<s:property value="ass.assModel" />" />
    			 <input type="hidden" name="ass.by2" value="<s:property value="ass.by2" />" />
    			 <input type="hidden" name="ass.userDepartmentno" value="<s:property value="ass.userDepartmentno" />" />
    			 <input type="hidden" id="currPage" name="currPage" value="1" />
    			 <input type="hidden" id="pageCount"  value="<s:property value="#request.pageBean.pageCount" />" />
    		 </s:form> 
    		 <div id="assDiv" style="height: 350px;overflow-y: auto;" >
    		 	<table id="assTable" width="100%" border="0" cellspacing="1" cellpadding="0" class="D_table">
    					<tr>
    						<th width="30px">序号</th>
    						<th >条形码</th>
    						<th>资产名称</th>
    						<th>规格型号</th>
    						<th width="100px">资产分类</th>
    						<th >使用科室</th>
    						<th width="85px">资产原值</th>
    						<th width="80px">购置日期</th>
    					</tr>
    					 <s:iterator var="item" value="#request.list" status="sts">
    						<tr>
    							<td height="24" align="center" bgcolor="#FFFFFF">
    								<s:property value="#sts.index+1"/>
    							</td>
    							<td  bgcolor="#FFFFFF">
    								<s:property value="#item.assNo"/>
    							</td>
    							<td bgcolor="#FFFFFF">
    								<s:property value="#item.assName"/>
    							</td>
    							<td bgcolor="#FFFFFF">
    								<s:property value="#item.assModel"/>
    							</td>
    							<td  bgcolor="#FFFFFF" align="center">
    								<s:property value="#item.zcfl"/>
    							</td>
    							<td  bgcolor="#FFFFFF" align="center">
    								<s:property value="#item.departmentnoName"/>
    							</td>
    							<td bgcolor="#FFFFFF" >
    								<fmt:formatNumber value="${assValue}" pattern="￥0.00"></fmt:formatNumber> 
    							</td>
    							<td bgcolor="#FFFFFF" align="center">
    								<s:date name="#item.assUsedate" format="yyyy-MM-dd"/>
    							</td>
    						</tr>
    					</s:iterator>
    				</table>
    		 </div>	
    	</body>
    </html>