基於Bootstrap的分頁元件bootstrap-pager使用說明
阿新 • • 發佈:2019-01-25
bootstrap-pager
本元件主要使用在扁平風格頁面的自定義分頁,做到頁面顯示和分頁元件分離。本分頁元件在JavaCode中應用。
鏈家網房屋資訊查詢分頁、拉鉤大鯤專案的分頁都使用類似的分頁元件。
使用
Step1: 引用樣式
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-pager.css">
Step2:引用指令碼
<script src="jquery/jquery-1.8.3.min.js" ></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="../js/bootstrap-pager.js"></script>
Step3:使用
靜態分頁
<div id="page-container-static-normal"></div>
$("#page-container-static-normal").page({
count:100,
theme:"normal"
});
$("#page-container-static-normal").on("pageChanged",function (event,params) {
console.log(params);
$(this).data("page").refresh(params);
})
動態分頁
下面演示的是一個頁面,在動態請求資料時,把分頁資訊傳送到後臺,並返回業務結果和分頁資訊,進行頁面載入和分頁元件渲染。
BaseBlog.prototype.init=function(){
this.builder();
}
//載入資料,渲染頁面
BaseBlog.prototype.builder=function (params) {
this.$element.html("");
var self=this;
this.pageSize=8;
var pageInfo=params||{pageNum:1,pageSize:this.pageSize};
ajaxPost(this.options.url,{pageInfo:JSON.stringify(pageInfo),key:$("#search_value").val()},function (data) {
self.data=data;
})
this.buildByData(this.data.data);
this.buildPager(this.data.pageInfo);
}
//設定分頁
BaseBlog.prototype.buildPager = function (pageInfo) {
var self=this;
self.pager=null;
var pager = $("#" + this.options.pageContainer).data("page").refresh(params);
pager.$element.unbind("pageChanged");
pager.$element.on("pageChanged", function (event, params) {
self.$element.html("");
self.builder(params);
})
this.pager = pager;
}
引數和方法說明
引數說明
名稱 | 預設值 | 說明 |
---|---|---|
count | 記錄總數 | |
maxPage | 9 | 顯示的分頁框數量 |
pageSize | 8 | 每頁顯示記錄數 |
theme | normal | 可選big 和normal ,頁面樣式 |
pageNum | 1 | 當前頁,隨著使用者操作變化 |
主要方法
名稱 | 引數 | 引數說明 | 方法說明 |
---|---|---|---|
refresh | pageInfo | 分頁物件,含有pageNum和pageSize兩個值 | 重新整理分頁 |
init | 初始化 | ||
drawPage | count,pageNum | 記錄總數,當前頁 | 分頁渲染 |
setPreviousButton | 設定上一頁 按鈕狀態 |
||
setNextButton | 設定下一頁 按鈕狀態 |
||
setActiveButton | 高亮顯示當前選中頁 | ||
bindEvent | 為所有按鈕繫結事件 |