bootstrap中分页功能怎么弄
这篇文章主要介绍bootstrap中分页功能怎么弄,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
站在用户的角度思考问题,与客户深入沟通,找到鹿泉网站设计与鹿泉网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站制作、成都网站制作、企业官网、英文网站、手机端网站、网站推广、空间域名、雅安服务器托管、企业邮箱。业务覆盖鹿泉地区。
bootstrap分页的实现方法:首先使用div来包裹里面将被清空的内容;然后使用a标签,实现上一页和下一页的功能;最后通过ajax实现初始加载、上一页以及下一页的效果即可。
bootstrap实现分页
算法改进:【主要使用js配合MySQL的limit实现上一页,下一页】
【在查询数据的时候,使用了limit,现在,我固定每页显示3条记录,进行分页】
首先ajax向servlet发起请求,然后请求的数json数据。现在,开始设计ajax,html。
一、由于每次翻页,之前的数据都要被覆盖/清空。所以使用div来包裹里面将被清空的内容。
为什么要保留div内,因为我们还要向里面添加数据,保留他,类似于参照物。
现在,存放数据的地方有可基本设计框架,那么现在,是不是应该有一样东西来对数据进行操作呢,如:上一页,下一页。
二、使用a标签,实现上一页,下一页功能。
这里,我使用nextpage方法实现下一页,上一页使用prevpage。先有这样一个思路
上一页下一页
既然如此,那么现在是实现数据加载的ajax了
三、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); } }
主要记录思想实现,代码有待优化,但思路已经很清晰,那么,以上是在确认每页显示3条数据,那么,要实现每页显示n条数据,该如何实现呢。想必不用多少了。
那么随后,请自己思考,如何将这里提出的问题实现,同时打包成一个属于自己的东西呢?这个步骤就不写了。
那么后台servlet如何控制,防止出现异常呢?那就是值的问题,凡是出现null或者"",或者<0等都将其值为0,这样就可以解决了。
以上是“bootstrap中分页功能怎么弄”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享标题:bootstrap中分页功能怎么弄
当前路径:http://myzitong.com/article/ppeoji.html