建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

基于Bootstrap的JS分页插件BootstrapPager

来源:易助科技网浏览量:9收藏

简介

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

(下载的附件中附有DEMO)


基于Bootstrap的JS分页插件BootstrapPager -示例图1
基于Bootstrap的JS分页插件BootstrapPager -示例图2


参数说明:


名称默认值说明
count记录总数
maxPage9显示的分页框数量
pageSize8每页显示记录数
themenormal可选bignormal,页面样式
pageNum1当前页,随着用户操作变化


主要方法:


名称参数参数说明方法说明
refreshpageInfo分页对象,含有pageNum和pageSize两个值刷新分页
init初始化
drawPagecount,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;
  }



相关链接

GitHub 地址 :https://github.com/wangkaiup/bootstrap-pager

Gitee 地址 :https://gitee.com/hylun/BootstrapPager