分页系列之三:网页滚动加载分页数据

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动加载示例</title>
<style>
html {_background:url(about:blank);}/*兼容IE6*/
body {font-size:12px;}
li {line-height:30px;}
#ajaxMsg {height:36px; line-height:36px; text-align:center;}
#ajaxMsg span {margin-bottom:-10px; margin-right:10px; display:inline-block; width:32px; height:32px;}
#ajaxMsg span.loading {background:url(loading.gif) no-repeat;}
#ajaxMsg span.pull {background:url(pull_down.gif) no-repeat;}
#rightToolbar {
    width:60px; height:90px; line-height:30px; text-align:center; background:#ccc;
    position:fixed; bottom:100px; right:20px;
    /*兼容IE6*/
    _position:absolute; _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight-100);
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
    _page = 1;    //当前页
    loadData();
    //滚动事件
    $(window).scroll(function() {
        if (_isCanLoad && ($(window).height() + $(window).scrollTop()) >= $("body").height()){
            loadData();
        }
    });
    //回到页面顶部
    $("#toPageTop").click(function(e) {
        e.preventDefault();
        $("body,html").animate({scrollTop:0}, 500);
    });
    //回到页面底部
    $("#toPageBottom").click(function(e) {
        e.preventDefault();
        $("body,html").animate({scrollTop:document.body.clientHeight}, 500);
    });
});
function loadData() {
    _isCanLoad = false;    //设为false,加载过程中滚动页面,不会重复加载
    $("#ajaxMsg").html('<span class="loading"></span>加载中……');
    $.ajax({
        url: "data.txt",
        data: {page: _page},    //示例只传递了当前页码,每页记录数也可以由这里传递给后端
        dataType: 'html',
        success: function(data, textStatus) {
            $("#list").append(data);
            var totalPage = Math.ceil(_total / 20);    //计算总页数,20是每页记录数,要和后端一致
            $("#page").html('记录总数:'+ _total +'<br>总页数:' + totalPage + '<br>当前页:' + _page);
            if (_total == 0) {
                $("#ajaxMsg").html('没有找到信息');
            }
            else if (_page == totalPage) {
                $("#ajaxMsg").html('全部加载完成');
            }
            else {
                _page ++;
                _isCanLoad = true;    //加载成功,且有下一页,设为true,滚动页面可继续加载下一页
                $("#ajaxMsg").html('<span class="pull"></span>下拉加载更多');
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            $("#ajaxMsg").html('加载失败,<a href="javascript:loadData();">点此重试</a>');
        }
    });
}
</script>
</head>
<body>
<div style="height:150px; background:#CCC;">顶部</div>
<div>
<ul id="list"></ul>
<div id="ajaxMsg"><img src="loading.gif">加载中……</div>
</div>
<div style="height:80px; background:#ccc;">底部</div>
<div id="rightToolbar"><a href="/">返回首页</a><br><a href="#" id="toPageTop">返回顶部</a><br><a href="#" id="toPageBottom">返回底部</a></div>
<div id="page" style="width:100px;height:90px;position:fixed;top:100px;right:20px;"></div>
</body>
</html>

以上为一个简单而又完整的示例。

本例AJAX请求的数据格式为HTML,格式如下,其中包含一个JavaScript全局变量_total,表示总记录数,待添加到主页面后,可以使用该变量,用于计算总页数。

<li>aaaaaaaaa</li>
<li>bbbbbbbb</li>
......
<li>sssssssssssssss</li>
<li>ttttttttttt</li>
<script>_total=100</script>

也可以使用如下格式的JSON数据,这里模拟最后一页的数据,每页20条,总记录83条,返回最后3条。

{
    "Total": 83,
    "List": [{
        "ID": 666,
        "Title": "aaa"
    }, {
        "ID": 888,
        "Title": "bbb"
    }, {
        "ID": 999,
        "Title": "ccc"
    }]
}

使用JSON后,需要对AJAX回调中的 $("#list").append(data) 做相应的调整,计算总页数的方式也要调整为:

var totalPage = Math.ceil(data.Total / 20);

示例下载

----分页系列----

一、SQL Server 分页存储过程

二、ASP.NET MVC 网页分页

三、网页滚动加载分页数据

四、微信小程序滚动加载分页数据

五、WinForm + DevExpress 自制分页控件

posted on 2021-04-26 20:15  羊茂林  阅读(333)  评论(0编辑  收藏  举报

导航