在bootstrap中怎么实现分页

这篇文章主要为大家展示了“在bootstrap中怎么实现分页”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“在bootstrap中怎么实现分页”这篇文章吧。

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

<div id="co">         <h2 class="h"></h2>  <!-- 这里的标签都加上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("<h3 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中怎么实现分页”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！