Ajax动态滚动加载数据
看新浪微博，人人网都有这样的效果：滚动条滚动到最下面的时候，新的数据就被自动加载出来了，今天亲自尝试了一下这个效果的实现。
最开始在CSDN上写了一版，功能比较简单，今天又增加了一个小功能：翻页到指定页数后，自动停止。用户点击继续查看后，再继续滚动。看看实现吧：
更新核心滚动代码：
$(window).scroll(function(){
// 当滚动到最底部以上n像素时， 加载新内容
if ($(document).height() - $(this).scrollTop() - $(this).height()<1) {
if (!gDataGetAll) {
getData(gCurrentPage, gLongitude, gLatitude);
}
}
});
首先，准备一个分页的存储过程：
CREATE PROCEDURE proctest
@pagesize INT,
@pagenumber INT
AS SELECT *
FROM ( SELECT ROW_NUMBER()OVER (ORDER BY userid)AS ROWNUM,c_name,user_email FROM ehrusers WHERE c_name<>''
) AS products
WHERE ROWNUM BETWEEN @pagesize*(@pagenumber-1)+1 and @pagesize*@pagenumber EXEC dbo.proctest 20, 1
接着，写一个取数据的C#方法：
//Test
public static DataTable GetTable(int pagesize, int pagenum)
{
string sql = string.Format(@"EXEC dbo.proctest {0}, {1}", pagesize, pagenum);
DataSet ds = SqlHelper.ExecuteDataset(ConnString.GetConString, CommandType.Text, sql);
if (ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0)
{
return ds.Tables[0];
}
else
{
return null;
}
}
Ajax请求数据的逻辑，调用刚才的方法，返回JSON：
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["pagesize"] != null && Request.QueryString["pagenumber"] != null)
{
int pagesize = int.Parse(Request.QueryString["pagesize"].ToString());
int pagenumber = int.Parse(Request.QueryString["pagenumber"].ToString());
System.Data.DataTable dt = DB.GetTable(pagesize, pagenumber);
string json = Tools.CreateJsonParameters(dt);
Response.Write(json);
} }
其中用到了一个aspx页面作为controller。
接下来，就是比较重要的页面和js代码了：
页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动测试</title>
<style>
.mainDiv {
width: 800px;
border: solid 1px #f00;
padding: 10px;
} .item {
width: 600px;
height: 50px;
border: solid 1px #00ff90;
font-size: 12px;
margin: 10px;
} .title {
font-size: 16px;
line-height: 20px;
} .content {
line-height: 14px;
}
</style>
<script src="Scripts/jquery-1.7.1.js"></script> </head>
<body>
<h1>滚动测试</h1>
<div class="mainDiv">
<!--<div class="item">
<div class="title">title</div>
<div class="content">content content content content content content content</div>
</div>
-->
</div> </body>
</html>
JS：
<script type="text/javascript">
var gPageSize = 10;
var i = 1; //设置当前页数，全局变量
$(function () {
//根据页数读取数据
function getData(pagenumber) {
i++;//页码自动增加，保证下次调用时为新的一页。
$.get("Ajax.aspx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {
if (data.length > 0) {
var jsonObj = JSON.parse(data); insertDiv(jsonObj.Head); }
});
}
//初始化加载第一页数据
getData(1); //生成数据html，append到div中
function insertDiv(json) {
var $mainDiv = $(".mainDiv");
var html = '';
for (var i = 0; i < json.length; i++) {
html += '<div class="item">';
html += ' <div class="title">' + json[i].ROWNUM + ' ' + json[i].c_name + '</div>';
html += '<div class="content">' + json[i].user_email.replace('lightinthebox', 'sina') + '</div>';
html += '</div>';
}
$mainDiv.append(html);
} //==============核心代码=============
var winH = $(window).height(); //页面可视区域高度 var scrollHandler = function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH - winH - scrollT) / winH;
if (aa < 0.02) {//0.02是个参数
if (i % 10 === 0) {//10页做一次停顿！
getData(i);
$(window).unbind('scroll');
$("#btn_NextPage").show();
} else {
getData(i);
$("#btn_NextPage").hide();
} }
}
//定义鼠标滚动事件
$(window).scroll(scrollHandler);
//==============核心代码============= //继续加载按钮事件
$("#btn_NextPage").click(function () {
getData(i);
$(window).scroll(scrollHandler);
});
});
</script>
最终效果：
滚动前：
滚动自动刷新，到第10页后自动停止，出现链接：
大功告成！
Ajax动态滚动加载数据的更多相关文章
- highcharts Ajax 动态请求加载数据
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
- ajax按楼层加载数据
代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
- 基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
- h5页面列表滚动加载数据
h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...
- PHP+InfiniteScroll实现网页无限滚动加载数据实例
PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...
- Vue无限滚动加载数据
Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...
随机推荐
- postmortem report of period M1
一.设想和目标 1.我们的软件主要要解决学长设计的学霸系统中视频及文档的浏览功能问题. 2.时间相对充裕.不过对于我们这些零基础的人来说还是比较困难. 3.我们团队中不同意见通常会进行进一步讨论,说出 ...
- 团队作业（NABC的分析）
我们的团队课题是游戏:躲避小球. 我认为它其中的一个优点是:丰富用户的短暂闲暇时间,使用户得到身心的放松 下面我将从N,A,B,C四个方面简述理由 N(需求):现代社会逐渐步入快节奏时代,大众生活压力 ...
- 转载：centos上yum安装apache+php+mysql等
1. 更新系统内核到最新. [root@linuxfei ~]#yum -y update 系统更新后,如果yum安装时提示错误信息,请执行以下命令修复. [root@linuxfei ~]#rpm ...
- 学习ThinkPHP-1
ThinkPHP 自建路由 关于文件关联 当在Applicatin\Home\Controller文件夹下建立一个控制器时如LoginController.class.php 在此文件夹下还有一个默认 ...
- python 解析web接口的json数据
实例1-使用urllib2 #utf-8 import urllib2 import json url="http://xxx.com" #获取json格式的字符串 page=ur ...
- android 自动化压力测试-monkey 2 获取程序包名
monkey 1 中我们写到: C:\Users\chenshan>adb shell shell@hwG750-T20:/ $ monkey -p cn.emoney.acg -v 500 说 ...
- vasprintf的实现
有些系统,例如AIX,没有vasprintf和asprintf ,如果是做porting,有时需要写一个简单的代替. 代码如下: #if !defined(HAVE_VASPRINTF) #if de ...
- maven插件：tomcat插件和jetty插件的区别
在程序是多模块结构的时候,使用tomcat的maven插件和jetty的maven插件有细微差别: 1.tomcat7-maven-plugin 可以直接在parent的邮件直接运行:tomcat ...
- 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此。HF作为牛客的资深元老,自然也准备了一些小游戏。其中,有个游戏是这样的:首先,让小朋友们围成一个大圈。然后,他随机指定一个数m,让编号为0的小朋友开始报数。每次喊到m-1的那个小朋友要出列唱首歌,然后可以在礼品箱中任意的挑选礼物,并且不再回到圈中,从他的下一个小朋友开始,继续0...m-1报数....这样下去....直到剩下
// test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...
- Python中__init__方法/__name__系统变量讲解
__init__方法在类的一个对象被建立时,马上运行.这个方法可以用来对你的对象做一些你希望的初始化. 代码例子 test.py#!/usr/bin/python# Filename: class_i ...