前端技术文档及相关资料下载
关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！
JS基于Bootstrap分页插件BootstrapPager
简介
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;
}相关链接
GitHub 地址 ：https://github.com/wangkaiup/bootstrap-pager
Gitee 地址 ：https://gitee.com/hylun/BootstrapPager