代码很简单:
<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>
相关推荐
主要介绍了jQuery实现当拉动滚动条到底部加载数据的方法,结合实例形式分析了jQuery针对滚动事件的监听、响应及数据加载相关操作技巧,需要的朋友可以参考下
代码如下: <...拉动滚动条加载数据</title> [removed][removed] [removed] $(function () { var i = 4;$(window).bind(“scroll”, function (event) { //滚动条到网页头部的 高度,兼容ie,ff,chr
下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据 都可以 别忘了引用jquery类库 $(window).scroll(function () { var scrollTop = $(this)....
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博、QQ空间等。 代码如下: 代码...
我们经常会看到拉动滚动条时到页底时,页面会继续加载更多内容。这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 若是想看该网页特效教程 ...
下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据 都可以。 加载jQuery库后我们可以这样使用: $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var ...
主要为大家详细介绍了jQuery Datatables表头不对齐的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...
前几天上QQ的在线视频网站,看到上面的影片列表页的图片有这样一种效果:当向下拉动滚动条时下面的图片才开始加载,就是说它不会一下子把所有的图片都加载出来,拉动滚动条后用户看到了才会显示,这是一个很不错的...