bootstrap中分頁功能怎么弄

這篇文章主要介紹bootstrap中分頁功能怎么弄，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

bootstrap分頁的實現方法：首先使用div來包裹里面將被清空的內容；然后使用a標簽，實現上一頁和下一頁的功能；最后通過ajax實現初始加載、上一頁以及下一頁的效果即可。

bootstrap實現分頁

算法改進：【主要使用js配合mysql的limit實現上一頁，下一頁】

【在查詢數據的時候，使用了limit，現在，我固定每頁顯示3條記錄，進行分頁】

首先ajax向servlet發起請求，然后請求的數json數據。現在，開始設計ajax,html。

一、由于每次翻頁，之前的數據都要被覆蓋/清空。所以使用div來包裹里面將被清空的內容。

為什么要保留div內，因為我們還要向里面添加數據，保留他，類似于參照物。

<div id="co">
        <h2 class="h"></h2>  <!-- 這里的標簽都加上class="h"，后面都要動態清空-->
</div>

現在，存放數據的地方有可基本設計框架，那么現在，是不是應該有一樣東西來對數據進行操作呢，如：上一頁，下一頁。

二、使用a標簽，實現上一頁，下一頁功能。

這里，我使用nextpage方法實現下一頁，上一頁使用prevpage。先有這樣一個思路

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

既然如此，那么現在是實現數據加載的ajax了

三、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);
}
}

主要記錄思想實現，代碼有待優化，但思路已經很清晰，那么，以上是在確認每頁顯示3條數據，那么，要實現每頁顯示n條數據，該如何實現呢。想必不用多少了。

那么隨后，請自己思考，如何將這里提出的問題實現，同時打包成一個屬于自己的東西呢？這個步驟就不寫了。

那么后臺servlet如何控制，防止出現異常呢?那就是值的問題，凡是出現null或者""，或者<0等都將其值為0，這樣就可以解決了。

以上是“bootstrap中分頁功能怎么弄”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！