基于Bootstrap的JS分页插件BootstrapPager

来源：易助科技网浏览量：7收藏

简介

BootstrapPager 是一个非常精巧的 javascript 实现的 Bootstrap 分页插件，您不需要依赖任何第三方类库，只需要通过简单的引用调用，即可实现动态显示 Bootstrap 分页组件。

（下载的附件中附有DEMO）

参数说明：

名称	默认值	说明
count		记录总数
maxPage	9	显示的分页框数量
pageSize	8	每页显示记录数
theme	normal	可选`big`和`normal`，页面样式
pageNum	1	当前页，随着用户操作变化

主要方法：

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

使用

1. 引入文件

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-pager.css">

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

2. HTML

<div id="page-container-static-normal"></div>

3. 调用

静态分页：

$("#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;
  }

基于Bootstrap的JS分页插件BootstrapPager

简介

使用

1. 引入文件

2. HTML

3. 调用

相关链接