分页系列之三：网页滚动加载分页数据
<!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);
----分页系列----
