基于Bootstrap的分页组件bootstrap-pager使用说明

bootstrap-pager

分页组件

本组件主要使用在扁平风格页面的自定义分页,做到页面显示和分页组件分离。本分页组件在JavaCode中应用。

链家网房屋信息查询分页、拉钩大鲲项目的分页都使用类似的分页组件。

Github地址:https://github.com/bill1012/bootstrap-pager

使用

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记录总数
maxPage9显示的分页框数量
pageSize8每页显示记录数
themenormal可选bignormal,页面样式
pageNum1当前页,随着用户操作变化

主要方法

名称参数参数说明方法说明
refreshpageInfo分页对象,含有pageNum和pageSize两个值刷新分页
init初始化
drawPagecount,pageNum记录总数,当前页分页渲染
setPreviousButton设置上一页按钮状态
setNextButton设置下一页按钮状态
setActiveButton高亮显示当前选中页
bindEvent为所有按钮绑定事件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值