bootstrap 分頁的實作方法

bootstrap分頁的實作方法：首先使用div來包裝裡面將被清空的內容；然後使用a標籤，實現上一頁和下一頁的功能；最後透過ajax實現初始載入、上一頁以及下一頁的效果即可。

本教學操作環境：Windows7系統、bootsrap3.3.7版，Dell G3電腦，此方法適用於所有品牌電腦。

推薦：《bootstrap影片教學》《css影片教學》

bootstrap實作分頁

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

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

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

一、由於每次翻頁，先前的資料都要覆寫/清空。所以使用div來包裝裡面將被清空的內容。

為什麼要保留div內，因為我們還要在裡面添加數據，保留他，類似於參考物。

<div id="co">
        <h1 class="h"></h1>  <!-- 这里的标签都加上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("<h2 class=&#39;h&#39;>"+result[k].title+"</2><p class=&#39;h&#39;>"+result[k].name+"</p><p class=&#39;h&#39;><a class=&#39;btn&#39; href=&#39;javascript:clickA(0);&#39;>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 分頁的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！