在bootstrap中如何實(shí)現(xiàn)分頁？實(shí)現(xiàn)分享經(jīng)驗(yàn)分享！

在編程中我們會使用到不同的分頁效果，那么今天我們來說說有關(guān)于“在bootstrap中如何實(shí)現(xiàn)分頁？”這個問題吧！下面是小編整理的一些相關(guān)資料和自己的經(jīng)驗(yàn)，希望對大家有所幫助！

1、我們知道當(dāng)我們在每次翻頁的時候之前的數(shù)據(jù)都會被覆蓋或者清空；所以我們可以使用div來包裹里面將被清空的內(nèi)容。那么我們?yōu)槭裁匆Ａ粼赿iv內(nèi)，因?yàn)槲覀冞€要向里面添加數(shù)據(jù)，所以我們保留它是類似用于當(dāng)做參照物的效果，代碼如下：

<div id="co">
        <h1 class="h"></h1>  <!-- 這里的標(biāo)簽都加上class="h"，后面都要動態(tài)清空-->
</div>

2、使用?a?標(biāo)簽，實(shí)現(xiàn)上一頁，下一頁功能。

在這一步中，我使用?nextpage?方法實(shí)現(xiàn)下一頁，上一頁使用?prevpage?；代碼如下：

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

3、ajax實(shí)現(xiàn)初始加載

我們在加載的時候使用?key?來表示第多少條記錄數(shù)，即記錄的起始數(shù)據(jù)，我們首先思考，當(dāng)其他頁面的操作改變時，上一頁的參數(shù)和下一頁的參數(shù)應(yīng)該都會改變，隨?key?而改變。

代碼如下：

//1、默認(rèn)加載第一頁
clickA(0);
//2、加載數(shù)據(jù)的函數(shù)
function clickA(key){
$(".h").empty();
$.ajax({
type : "post",
async : true, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執(zhí)行）
url : "Page", //請求發(fā)送到Page處
data : {'key':key},
dataType : "json", //返回數(shù)據(jù)形式為json
success : function(result) {
//請求成功時執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對象
for(var k in result){
//將獲得的數(shù)據(jù)加入col-md-12 column
$("#con").before("<h2 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標(biāo)簽prev的屬性，下面這兩句是重點(diǎn)
$("#prev").attr("href","javascript:prevpage("+key+")");
$("#next").attr("href","javascript:nextpage("+key+")");
} 
},
error : function(XMLHttpRequest, textStatus,errorMsg) {
//請求失敗時執(zhí)行該函數(shù)
alert("錯誤碼:"+XMLHttpRequest.status);
alert("錯誤狀態(tài):"+XMLHttpRequest.readyState);
alert("數(shù)據(jù)請求數(shù)據(jù)失敗!"+errorMsg);
}
});
}
//3、實(shí)現(xiàn)上一頁功能:
function prevpage(prev){
if(prev==0){clickA(0);}else{
prev = prev-3;
clickA(prev);
}
//4、實(shí)現(xiàn)下一頁功能
var numa=0;
function nextpage(numa){
//獲取當(dāng)前的key 
//將key+3，然后交給clickA
//獲取后臺帶到的key，在key的基礎(chǔ)上增加
numa=numa+3;
clickA(numa);
}
}

對于“在bootstrap中如何實(shí)現(xiàn)分頁？”這個問題以上就是相關(guān)的內(nèi)容和思路，如果你有更好的方法也可以提出來和大家一同探討，更多的有關(guān)于Bootstrap的內(nèi)容我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解。