jQuery 无刷新分页的实现代码
发布时间：2015-11-21 编辑：jiaochengji.com
本文介绍下，jquery实现无刷新分布的一例代码，学习下jquery无刷新显示数据的方法，感兴趣的朋友参考学习下。
本节内容：
jquery 无刷新分页
例子，jQuery 无刷新分页实例代码。
复制代码 代码示例:
<html>
<head>
<script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="script/jquery-1.7.1.js"></script>
<script type="text/javascript" src="script/jquery.pagination.js"></script>
<script type="text/javascript">
/**
* 无刷新分页
* edit: www.jbxue.com
*/
$(function(){
//此demo通过Ajax加载分页元素
var initPagination = function(data) {
var feedback = "";
$.each(data.list, function(index, d) {
var str ="";
str+= "<dl class='result' style='display:none;'>";
str+="<dt><img src='http://www.jbxue.com/balijiang.png?l' alt='图片' width='70' height='70' /></dt>";
str+="<dd><a href='#' title='VYyu'>VYyu</a></dd>";
str+="<dd class='gray'>2009-09-26 </dd>";
str+="<dd>"+d+"</dd>";
str+="</dl>";
feedback += str;
});
$("#feedback").empty().append(feedback); //装载对应分页的内容
//alert(datac.list.length);
//var num_entries = $(".result").length;
var num_entries = data.list.length;
// 创建分页
$("#page").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 5, //主体页数
callback: pageselectCallback,
items_per_page: 3, //每页显示1项
prev_text: "前一页",
next_text: "后一页"
});
pageselectCallback(0);
}
function pageselectCallback(page_index, jq){
var resultList = $(".result");
//var feedback = "";
//alert(resultList.length);
$(".result").each( function(index, data) {
//alert(index);
$(this).css('display','none');
if(Math.floor(index/3) == page_index){
$(this).css('display','block');
}
});
return false;
}
//ajax加载
$.getJSON("testPage",null, function(data){initPagination(data)});
});
</script>
</head>
<body>
<div id="feedback" class="feedback"> </div>
<div id="page" class="pager"></div>
</body>
</html>
<head>
<script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="script/jquery-1.7.1.js"></script>
<script type="text/javascript" src="script/jquery.pagination.js"></script>
<script type="text/javascript">
/**
* 无刷新分页
* edit: www.jbxue.com
*/
$(function(){
//此demo通过Ajax加载分页元素
var initPagination = function(data) {
var feedback = "";
$.each(data.list, function(index, d) {
var str ="";
str+= "<dl class='result' style='display:none;'>";
str+="<dt><img src='http://www.jbxue.com/balijiang.png?l' alt='图片' width='70' height='70' /></dt>";
str+="<dd><a href='#' title='VYyu'>VYyu</a></dd>";
str+="<dd class='gray'>2009-09-26 </dd>";
str+="<dd>"+d+"</dd>";
str+="</dl>";
feedback += str;
});
$("#feedback").empty().append(feedback); //装载对应分页的内容
//alert(datac.list.length);
//var num_entries = $(".result").length;
var num_entries = data.list.length;
// 创建分页
$("#page").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 5, //主体页数
callback: pageselectCallback,
items_per_page: 3, //每页显示1项
prev_text: "前一页",
next_text: "后一页"
});
pageselectCallback(0);
}
function pageselectCallback(page_index, jq){
var resultList = $(".result");
//var feedback = "";
//alert(resultList.length);
$(".result").each( function(index, data) {
//alert(index);
$(this).css('display','none');
if(Math.floor(index/3) == page_index){
$(this).css('display','block');
}
});
return false;
}
//ajax加载
$.getJSON("testPage",null, function(data){initPagination(data)});
});
</script>
</head>
<body>
<div id="feedback" class="feedback"> </div>
<div id="page" class="pager"></div>
</body>
</html>
您可能感兴趣的文章：
jQuery 定时局部刷新(setInterval)方法总结
js控制网页自动刷新 刷新一次停止刷新
js刷新页面几种方法小结
jquery刷新页面的实现代码（局部及全页面刷新）
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
js返回上一页并刷新多种方法举例
JQuery与JSon实现的无刷新分页代码
jquery ajax 无刷新提交数据与无刷新登录的例子
JQuery实现用户名无刷新验证的小例子
js自动刷新页面代码汇总
上一篇：Jquery+JSon 无刷新分页的例子
下一篇：jQuery中文乱码的解决方法
[关闭]