如何使用bootstrap實現分頁

這篇文章主要講解了“如何使用bootstrap實現分頁”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用bootstrap實現分頁”吧！

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

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

使用bootstrap怎么實現分頁

1、我們知道當我們在每次翻頁的時候之前的數據都會被覆蓋或者清空；所以我們可以使用div來包裹里面將被清空的內容。那么我們為什么要保留在div內，因為我們還要向里面添加數據，所以我們保留它是類似用于當做參照物的效果，代碼如下：

<div id="co">
        <h2 class="h"></h2>  <!-- 這里的標簽都加上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 : {'key':key},
dataType : "json", //返回數據形式為json
success : function(result) {
//請求成功時執行該函數內容，result即為服務器返回的json對象
for(var k in result){
//將獲得的數據加入col-md-12 column
$("#con").before("<h3 class='h'>"+result[k].title+"</2><p class='h'>"+result[k].name+"</p><p class='h'><a class='btn' href='javascript:clickA(0);'>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實現分頁這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！