RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
如何使用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", //返回数据形式为json
success : 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实现分页这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


网页名称:如何使用bootstrap实现分页
本文网址:http://lswzjz.com/article/jpjjch.html