当页面加载的时候使用span class=”btn btn-sm btn-info”>keyid来表示起始的记录数,如果其他页面操作了的时候,上一页和下一页都会随着变化,那么这个keyid也会随着而改变。

ajax实现初始加载bootstrap分页效果
ajax实现初始加载bootstrap分页效果

代码如下:

//1、默认加载首页
clickA(0);
//2、加载函数
function clickA(keyid){
$(".h").empty();
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "Page", //请求发送到Page处
data : {'keyid':keyid},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
for(var k in result){
//将获得的数据加入col-md-12 column
$("#con").before("<h2 class='h'>"+result[k].title+"</2><p class='h'>"+result[k].name+"</p><p class='h'><a class='btn' href='javascript:clickA(0);'>View details »</a>"+"</p>");
//改变a标签prev的属性,下面这两句是重点
$("#prev").attr("href","javascript:prevpage("+keyid+")");
$("#next").attr("href","javascript:nextpage("+keyid+")");
} 
},
error : function(XMLHttpRequest, textStatus,errorMsg) {
//请求失败时执行该函数
alert("错误码:"+XMLHttpRequest.status);
alert("错误状态:"+XMLHttpRequest.readyState);
alert("数据请求数据失败!"+errorMsg);
}
});
}
//3、实现上一页功能:
function prevpage(prev){
if(prev==0){clickA(0);}else{
prev = prev-3;
clickA(prev);
}
//4、实现下一页功能
var numa=0;
function nextpage(numa){
//获取当前的keyid 
//将keyid+3,然后交给clickA
//获取后台带到的keyid,在keyid的基础上增加
numa=numa+3;
clickA(numa);
}
}

发表回复

后才能评论