Rumah >hujung hadapan web >Tutorial Bootstrap >bootstrap 分页的实现方法

bootstrap 分页的实现方法

藏色散人
藏色散人asal
2020-12-07 09:16:214091semak imbas

bootstrap分页的实现方法:首先使用div来包裹里面将被清空的内容;然后使用a标签,实现上一页和下一页的功能;最后通过ajax实现初始加载、上一页以及下一页的效果即可。

bootstrap 分页的实现方法

本教程操作环境:Windows7系统、bootsrap3.3.7版,Dell G3电脑,该方法适用于所有品牌电脑。

推荐:《bootstrap视频教程》《css视频教程

bootstrap实现分页

算法改进:【主要使用js配合mysql的limit实现上一页,下一页】

【在查询数据的时候,使用了limit,现在,我固定每页显示3条记录,进行分页】

首先ajax向servlet发起请求,然后请求的数json数据。现在,开始设计ajax,html。

一、由于每次翻页,之前的数据都要被覆盖/清空。所以使用div来包裹里面将被清空的内容。

为什么要保留div内,因为我们还要向里面添加数据,保留他,类似于参照物。

<div id="co">
        <h1 class="h"></h1>  <!-- 这里的标签都加上class="h",后面都要动态清空-->
</div>

现在,存放数据的地方有可基本设计框架,那么现在,是不是应该有一样东西来对数据进行操作呢,如:上一页,下一页。

二、使用a标签,实现上一页,下一页功能。

这里,我使用nextpage方法实现下一页,上一页使用prevpage。先有这样一个思路

<a href="javascript:prevpage(0)">上一页</a><a href="javascript:nextpage(0)">下一页</a>

既然如此,那么现在是实现数据加载的ajax了

三、ajax实现初始加载、上一页、下一页。

key表示第多少条记录数,即记录的起始数据,我们首先思考,当其他页面的操作改变时,上一页的参数和下一页的参数应该都会改变,随key而改变。

大概如下:

//1、默认加载第一页
clickA(0);
//2、加载数据的函数
function clickA(key){
$(".h").empty();
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "Page", //请求发送到Page处
data : {&#39;key&#39;:key},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
for(var k in result){
//将获得的数据加入col-md-12 column
$("#con").before("<h2 class=&#39;h&#39;>"+result[k].title+"</2><p class=&#39;h&#39;>"+result[k].name+"</p><p class=&#39;h&#39;><a class=&#39;btn&#39; href=&#39;javascript:clickA(0);&#39;>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);
}
}

主要记录思想实现,代码有待优化,但思路已经很清晰,那么,以上是在确认每页显示3条数据,那么,要实现每页显示n条数据,该如何实现呢。想必不用多少了。

那么随后,请自己思考,如何将这里提出的问题实现,同时打包成一个属于自己的东西呢?这个步骤就不写了。

那么后台servlet如何控制,防止出现异常呢?那就是值的问题,凡是出现null或者"",或者<0等都将其值为0,这样就可以解决了。

Atas ialah kandungan terperinci bootstrap 分页的实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn