基于jquery的无刷新分页技术

212 阅读 0 评论 140 点赞

我是靠谱客的博主单薄网络，最近开发中收集的这篇文章主要介绍基于jquery的无刷新分页技术，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<script src="script/jquery-1.6.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var index = 0; 
$(document).ready(function () { 
$.post("Default5.aspx", { name: index }, function (msg) { 
$("tr:gt(0)").remove(); 
var artice = msg; 
for (var i = 0; i < 5; i++) { 
$("table").append("<tr><td>" + artice[i]["ID"] + "</td><td>" + artice[i]["Writer"] + "</td><td>" + artice[i]["Title"] + "</td></tr>"); 
} 
}, "json"); 
}); 
$(document).ready(function () { 
$("a").click(function () { 
if ($(this).html() == "下一页") { 
index = index + 5; 
if (index > 10) { 
index = 10; 
} 
} 
if ($(this).html() == "上一页") { 
index = index - 5; 
if (index < 0) { 
index = 0; 
} 
} 
// alert(index); 
$.post("Default5.aspx", { name: index }, function (msg) { 
// alert(msg[0]["ID"]); 
$("tr:gt(0)").remove(); 
var artice = msg; 
for (var i = 0; i < 5; i++) { 
// alert("11"); 
$("table").append("<tr><td>" + artice[i]["ID"] + "</td><td>" + artice[i]["Writer"] + "</td><td>" + artice[i]["Title"] + "</td></tr>"); 
// $("table").append("<tr><td>1</td><td>2</td><td>3</td></tr>"); 
} 
}, "json"); 
}); 
}); 
</script> 