这篇文章主要讲解了“如何使用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+"2>
"+result[k].name+"
"); //改变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