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

最新推荐文章于 2021-06-09 17:06:18 发布

yangpanwww

最新推荐文章于 2021-06-09 17:06:18 发布

阅读量150

点赞数

文章标签： javascript java xhtml ViewUI

本文链接：https://blog.csdn.net/yangpanwww/article/details/84386886

版权

代码很简单：

 <div id="assDiv" style="height: 350px;overflow-y: auto;" >

</div>

/**  
    		  * 判断滚动条是否到最底端的方法 
    		  * @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>