使用bootstrap怎么实现分页

WBOY

发布时间：2022-02-17 15:13:34

11060人浏览过

来源于php中文网

原创

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

使用bootstrap怎么实现分页

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

使用bootstrap怎么实现分页

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

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

上一页
下一页

3、ajax实现初始加载

ASP.NET 4.0电子商城

在现实生活中的购物过程，购物者需要先到商场，找到指定的产品柜台下，查看产品实体以及标价信息，如果产品合适，就将该产品放到购物车中，到收款处付款结算。电子商务网站通过虚拟网页的形式在计算机上摸拟了整个过程，首先电子商务设计人员将产品信息分类显示在网页上，用户查看网页上的产品信息，当用户看到了中意的产品后，可以将该产品添加到购物车，最后使用网上支付工具进行结算，而货物将由公司通过快递等方式发送给购物者

下载

我们在加载的时候使用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);
}
}