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;
    }

引數和方法說明

引數說明

主要方法