如何使用bootstrap實(shí)現(xiàn)分頁(yè)

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

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

上一頁(yè)
下一頁(yè)

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ì)鎖住瀏覽器，用戶(hù)其他操作必須等待請(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(""+result[k].title+""+result[k].name+"
View details ?"+"
");
//改變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);
}
}

感謝各位的閱讀，以上就是“如何使用bootstrap實(shí)現(xiàn)分頁(yè)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何使用bootstrap實(shí)現(xiàn)分頁(yè)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！