JS实现ajax分页案例
<!DOCTYPE html >
<html>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<script src=”http://m.mx175.com/js/jquery-1.8.0.js”></script>
<link rel=”stylesheet” href=”http://m.mx175.com/css/lrtk.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”http://m.mx175.com/css/public.min.css”/>
<script type=”text/javascript”>
$(window).load(function() {
/**动态加载数据**/
//加载更多显示层
var moreGameDiv = $(“#moreGameDiv”);
//正在加载
var gameLoading = $(“#gameLoading”);
//内容层
var gameContent = $(“.gl_list_list”);
//总记录条数
var totalRecords = 16;
//每页显示条数
var pageRecords = 5;
//总页数
var pageCount = Math.ceil(totalRecords/pageRecords);
//当前页
var pageCurrent = 1;
//正在加载隐藏
gameLoading.hide();
//判断是否存更多内容
if(pageCurrent>=pageCount)
{
moreGameDiv.hide();
}else{
moreGameDiv.show();
}
//加载更多点击事件
$(“#moreGame”).click(function(){
//获取下一页
pageCurrent++;
moreGameDiv.hide();
gameLoading.show();
$.get(“test.txt”,{pageCurrent:pageCurrent},function(data){
/*
gameLink;链接
gameImage;图片
gameTitle;标题
gameHot;人气
gameDescribe;描述
gameStart;开始链接
*/
//循环遍历显示数据
$.each(data.games,function(i,game){
gameContent.append(
“<div class=’gl_list_one’>”+
“<a href=’”+game.gameLink+”‘ target=’_self’>”+
“<div class=’gl_list_one_left’>”+
“<img src=’http://m.mx175.com/images/”+game.gameImage+”‘ width=’100′ height=’100′>”+
“</div>”+
“<div class=’gl_list_one_center’>”+
“<h5>”+game.gameTitle+”</h5>”+
“<div><span class=’gl_info_star gl_info_star2′></span> 人气:”+game.gameHot+”</div>”+
“<p>”+game.gameDescribe+”</p>”+
“</div>”+
“</a>”+
“<div class=’gl_list_one_right’><a href=’”+game.gameStart+”‘ target=’_self’ class=’fl_button fl_button_grey’>开始</a>”+
“</div>”+
“<div>”
);
});
gameLoading.hide();
//判断是否存更多内容
if(pageCurrent>=pageCount)
{
moreGameDiv.hide();
}else{
moreGameDiv.show();
}
},”json”);
});
});
</script>
<!–nextpage–>
<link type=”text/css” href=”http://m.mx175.com/css/game_list.css” rel=”stylesheet”/>
</head>
<body>
<div class=”block”>
<!– StaticPage –>
<div class=”gl_list_list” id=”list”>
<div class=”gl_list_one”>
<a href=”##” target=”_self”>
<div class=”gl_list_one_left”>
<img src=”http://m.mx175.com/images/xiaoniao.png” width=”100″ height=”100″>
</div>
<div class=”gl_list_one_center”>
<h5>决胜21点</h5>
<div><span class=”gl_info_star gl_info_star2″></span> 人气：5</div>
<p>21点小游戏，身临其境的赌场。</p>
</div>
</a>
<div class=”gl_list_one_right”><a href=”##” target=”_self”class=”fl_button fl_button_grey”>开始</a></div>
</div>
<div class=”gl_list_one”>
<a href=”##” target=”_self”>
<div class=”gl_list_one_left”>
<img src=”http://m.mx175.com/images/xiaoniao.png” width=”100″ height=”100″>
</div>
<div class=”gl_list_one_center”>
<h5>决胜21点</h5>
<div><span class=”gl_info_star gl_info_star2″></span> 人气：5</div>
<p>21点小游戏，身临其境的赌场。</p>
</div>
</a>
<div class=”gl_list_one_right”><a href=”##” target=”_self”class=”fl_button fl_button_grey”>开始</a></div>
</div>
<div class=”gl_list_one”>
<a href=”##” target=”_self”>
<div class=”gl_list_one_left”>
<img src=”http://m.mx175.com/images/xiaoniao.png” width=”100″ height=”100″>
</div>
<div class=”gl_list_one_center”>
<h5>决胜21点</h5>
<div><span class=”gl_info_star gl_info_star2″></span> 人气：5</div>
<p>21点小游戏，身临其境的赌场。</p>
</div>
</a>
<div class=”gl_list_one_right”><a href=”##” target=”_self”class=”fl_button fl_button_grey”>开始</a></div>
</div>
<div class=”gl_list_one”>
<a href=”##” target=”_self”>
<div class=”gl_list_one_left”>
<img src=”http://m.mx175.com/images/xiaoniao.png” width=”100″ height=”100″>
</div>
<div class=”gl_list_one_center”>
<h5>决胜21点</h5>
<div><span class=”gl_info_star gl_info_star2″></span> 人气：5</div>
<p>21点小游戏，身临其境的赌场。</p>
</div>
</a>
<div class=”gl_list_one_right”><a href=”##” target=”_self”class=”fl_button fl_button_grey”>开始</a></div>
</div>
<div class=”gl_list_one”>
<a href=”##” target=”_self”>
<div class=”gl_list_one_left”>
<img src=”http://m.mx175.com/images/xiaoniao.png” width=”100″ height=”100″>
</div>
<div class=”gl_list_one_center”>
<h5>决胜21点</h5>
<div><span class=”gl_info_star gl_info_star2″></span> 人气：5</div>
<p>21点小游戏，身临其境的赌场。</p>
</div>
</a>
<div class=”gl_list_one_right”><a href=”##” target=”_self”class=”fl_button fl_button_grey”>开始</a></div>
</div>
<div class=”gl_list_one”>
<a href=”##” target=”_self”>
<div class=”gl_list_one_left”>
<img src=”http://m.mx175.com/images/xiaoniao.png” width=”100″ height=”100″>
</div>
<div class=”gl_list_one_center”>
<h5>决胜21点</h5>
<div><span class=”gl_info_star gl_info_star2″></span> 人气：5</div>
<p>21点小游戏，身临其境的赌场。</p>
</div>
</a>
<div class=”gl_list_one_right”><a href=”##” target=”_self”class=”fl_button fl_button_grey”>开始</a></div>
</div>
</div>
<!– End –>
<div id=”more_list” style=”margin-top: 10px;”></div>
</div>
<!– 更多–>
<div class=”region” id=”moreGameDiv” >
<nav class=”gl_list_tab”>
<div id=”game_hot3″ ><a id=”moreGame”>更多游戏</a></div>
</nav>
</div>
<div class=”region” id=”gameLoading” >
<nav class=”gl_list_tab”>
<div id=”game_hot3″ ><a>正在加载…</a></div>
</nav>
</div>
</body>
</html>
测试所用的test.txt文本
{“games”:[
{"gameLink":"http:www.baidu.com","gameImage":"xiaoniao.png","gameTitle":"愤怒的小鸟111","gameHot":100,"gameDescribe":"好玩啊","gameStart":"www.baidu.com"},
{"gameLink":"http:www.baidu.com","gameImage":"xiaoniao.png","gameTitle":"愤怒的小鸟","gameHot":100,"gameDescribe":"好玩啊","gameStart":"www.baidu.com"},
{"gameLink":"http:www.baidu.com","gameImage":"xiaoniao.png","gameTitle":"愤怒的小鸟","gameHot":100,"gameDescribe":"好玩啊","gameStart":"www.baidu.com"},
{"gameLink":"http:www.baidu.com","gameImage":"xiaoniao.png","gameTitle":"愤怒的小鸟","gameHot":100,"gameDescribe":"好玩啊","gameStart":"www.baidu.com"},
{"gameLink":"http:www.baidu.com","gameImage":"xiaoniao.png","gameTitle":"愤怒的小鸟","gameHot":100,"gameDescribe":"好玩啊","gameStart":"www.baidu.com"}
],”openService”:
[{"openTime":"4-14 8:00","openGame":"葫芦娃","openArea":"3服"},
{"openTime":"4-14 8:00","openGame":"葫芦娃","openArea":"3服"},
{"openTime":"4-14 8:00","openGame":"葫芦娃","openArea":"3服"},
{"openTime":"4-14 8:00","openGame":"葫芦娃","openArea":"3服"},
{"openTime":"4-14 8:00","openGame":"葫芦娃","openArea":"3服"},
{"openTime":"4-14 8:00","openGame":"葫芦娃","openArea":"3服"}
],”gamePost”:
[{"gameTitle":"英雄联盟","gameLink":"www.baidu.com"},
{"gameTitle":"英雄联盟","gameLink":"www.baidu.com"}
]}
