如何使用bootstrap实现分页

这篇文章主要讲解了"如何使用bootstrap实现分页"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"如何使用bootstrap实现分页"吧！

使用bootstrap实现分页的方法：1、利用div元素包裹翻页时将被清空的内容；2、利用a标签配合nextpage和prevpage方法实现上一页和下一页的功能；3、利用ajax实现初始加载即可。

本教程操作环境：Windows10系统、bootstrap3.3.7版、DELL G3电脑

使用bootstrap怎么实现分页

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

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

在这一步中，我使用nextpage方法实现下一页，上一页使用prevpage；代码如下：

上一页下一页

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", //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象for(var k in result){//将获得的数据加入col-md-12 column$("#con").before("
"+result[k].title+"
"+result[k].name+"
View details »"+"
");//改变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实现分页这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！