手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jquery的无刷新分页技术
基于jquery的无刷新分页技术
摘要:复制代码代码如下:varindex=0;$(document).ready(function(){$.post("Default5.aspx...

复制代码 代码如下:

<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>

【基于jquery的无刷新分页技术】相关文章:

javascript基于DOM实现权限选择实例分析

window.onload与$(document).ready()的区别分析

基于jQuery插件实现环形图标菜单旋转切换特效

实现placeholder效果的方案汇总

javascript无刷新评论实现方法

黑色风格的JS日历代码,左右箭头翻页年、月

jQuery实现在列表的首行添加数据

jquery滚动特效集锦

实现无刷新联动例子汇总

jQuery实现文本展开收缩特效

精品推荐
分类导航