在bootstrap中怎么實現分頁

這篇文章主要為大家展示了“在bootstrap中怎么實現分頁”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“在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中怎么實現分頁”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！