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

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

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

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

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

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

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

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

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

代碼如下：

//1、默認(rèn)加載第一頁(yè)
clickA(0);
//2、加載數(shù)據(jù)的函數(shù)
function clickA(key){
$(".h").empty();
$.ajax({
type : "post",
async : true, //異步請(qǐng)求（同步請(qǐng)求將會(huì)鎖住瀏覽器，用戶其他操作必須等待請(qǐng)求完成才可以執(zhí)行）
url : "Page", //請(qǐng)求發(fā)送到Page處
data : {'key':key},
dataType : "json", //返回?cái)?shù)據(jù)形式為json
success : function(result) {
//請(qǐng)求成功時(shí)執(zhí)行該函數(shù)內(nèi)容，result即為服務(wù)器返回的json對(duì)象
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) {
//請(qǐng)求失敗時(shí)執(zhí)行該函數(shù)
alert("錯(cuò)誤碼:"+XMLHttpRequest.status);
alert("錯(cuò)誤狀態(tài):"+XMLHttpRequest.readyState);
alert("數(shù)據(jù)請(qǐng)求數(shù)據(jù)失敗!"+errorMsg);
}
});
}
//3、實(shí)現(xiàn)上一頁(yè)功能:
function prevpage(prev){
if(prev==0){clickA(0);}else{
prev = prev-3;
clickA(prev);
}
//4、實(shí)現(xiàn)下一頁(yè)功能
var numa=0;
function nextpage(numa){
//獲取當(dāng)前的key 
//將key+3，然后交給clickA
//獲取后臺(tái)帶到的key，在key的基礎(chǔ)上增加
numa=numa+3;
clickA(numa);
}
}

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