首頁  >  文章  >  web前端  >  使用bootstrap怎麼實現分頁

使用bootstrap怎麼實現分頁

WBOY
WBOY原創
2022-02-17 15:13:3410518瀏覽

使用bootstrap實作分頁的方法:1、利用div元素包覆翻頁時將被清空的內容;2、利用a標籤配合nextpage和prevpage方法實作上一頁和下一頁的功能;3 、利用ajax實現初始載入即可。

使用bootstrap怎麼實現分頁

本教學操作環境:Windows10系統、bootstrap3.3.7版、DELL G3電腦

使用bootstrap怎麼實現分頁

1、我們知道當我們在每次翻頁的時候之前的資料都會被覆蓋或清空;所以我們可以使用div來包裝裡面將被清空的內容。那我們為什麼要保留在div內,因為我們還要向裡面添加數據,所以我們保留它是類似用於當做參照物的效果,代碼如下:

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

2、使用a標籤,實現上一頁,下一頁功能。

在這一步驟中,我使用nextpage方法實作下一頁,上一頁使用prevpage;程式碼如下:

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

3、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);
}
}

相關推薦:bootstrap教學

以上是使用bootstrap怎麼實現分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn