分頁有兩種方式:
1. 前台分頁:ajax一次請求獲取全部數據,適合少量數據(萬條數據以下);
$.ajax({
type: "GET",
url: "",//后台接口地址
dataType: "json",
success: function (msg) {
var pages = Math.ceil(msg.data / 5);//data是數據總量
var element = $('#id');//對應ul的id
element.bootstrapPaginator({
bootstrapMajorVersion: 3,//bootstrap版本
currentPage: page,//當前頁面
numberOfPages: 5,//一頁顯示幾個按鈕(在ul里面生成5個li)
totalPages: pages //總頁數
});
}
});
注意:1. bootstrap3中分頁的HTML部分要求使用ul標簽;2. 前台寫分頁算法。
2. 后台分頁:發送多次ajax,每次獲取指定頁數的數據(萬條數據以上)。
$('#id').bootstrapPaginator({
bootstrapMajorVersion: 3,//bootstrap版本
currentPage: 1,//當前頁碼
totalPages: data.cn,//總頁數(后台傳過來的數據)
numberOfPages: 5,//一頁顯示幾個按鈕
itemTexts: function (type, page, current) {
switch (type) {
case "first": return "首頁";
case "prev": return "上一頁";
case "next": return "下一頁";
case "last": return "末頁";
case "page": return page;
}
},//改寫分頁按鈕字樣
onPageClicked: function (event, originalEvent, type, page) {
$.ajax({
url: '../../interface/xw_zxdt_list.php',
type: 'post',
data: {page: page},
dataType: 'json',
success: function (data) {
tplData(data);//處理成功返回的數據
}
});
}
});
注意:1. bootstrap3中分頁的HTML部分要求使用ul標簽;2. 后台寫分頁算法。
