在编程中我们会使用到不同的分页效果,那么今天我们来说说有关于“在bootstrap中如何实现分页?”这个问题吧!下面是小编整理的一些相关资料和自己的经验,希望对大家有所帮助!

1、我们知道当我们在每次翻页的时候之前的数据都会被覆盖或者清空;所以我们可以使用div来包裹里面将被清空的内容。那么我们为什么要保留在div内,因为我们还要向里面添加数据,所以我们保留它是类似用于当做参照物的效果,代码如下:

<div id="co">
        <h1 class="h"></h1>  <!-- 这里的标签都加上class="h",后面都要动态清空-->
</div>

2、使用​a​标签,实现上一页,下一页功能。

在这一步中,我使用​nextpage​方法实现下一页,上一页使用​prevpage​;代码如下:

<a href="javascript:prevpage(0)">上一页</a>
<a href="javascript:nextpage(0)">下一页</a>

3、ajax实现初始加载

我们在加载的时候使用​key​来表示第多少条记录数,即记录的起始数据,我们首先思考,当其他页面的操作改变时,上一页的参数和下一页的参数应该都会改变,随​key​而改变。

代码如下:

//1、默认加载第一页
clickA(0);
//2、加载数据的函数
function clickA(key){
$(".h").empty();
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "Page", //请求发送到Page处
data : {'key':key},
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("+key+")");
$("#next").attr("href","javascript:nextpage("+key+")");
} 
},
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){
//获取当前的key 
//将key+3,然后交给clickA
//获取后台带到的key,在key的基础上增加
numa=numa+3;
clickA(numa);
}
}

总结:

对于“在bootstrap中如何实现分页?”这个问题以上就是相关的内容和思路,如果你有更好的方法也可以提出来和大家一同探讨,更多的有关于Bootstrap的内容我们都可以在W3cschool中进行学习和了解。