Ajax动态滚动加载数据

看新浪微博，人人网都有这样的效果：滚动条滚动到最下面的时候，新的数据就被自动加载出来了，今天亲自尝试了一下这个效果的实现。

核心代码更新：

    $(window).scroll(function(){
        // 当滚动到最底部以上n像素时， 加载新内容
        if ($(document).height() - $(this).scrollTop() - $(this).height()<1) {
                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 + '</div>';
                    html += '</div>';
                }
                $mainDiv.append(html);
            }

            //==============核心代码=============
            var winH = $(window).height(); //页面可视区域高度 
            //定义鼠标滚动事件
            $(window).scroll(function () {
                var pageH = $(document.body).height();
                var scrollT = $(window).scrollTop(); //滚动条top 
                var aa = (pageH - winH - scrollT) / winH;
                if (aa < 0.02) {//0.02是个参数
                    getData(i);
                }
            });
            //==============核心代码=============
        });
    </script>

最终效果：

滚动前：

滚动自动刷新：

后来又对这一版本进行了一些改进，详见：

http://www.cnblogs.com/dannywang/p/3337473.html

Ajax动态滚动加载数据

相关推荐