bootstrap-paginator 分页控件的使用
2016-07-07 16:14
316 查看
首先对js和css的引用
<link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="reference/bootstrap-paginator.js"></script>
初始化分页控件
<div id="page"></div>
<script type="text/javascript">
$(function(){
var options={
bootstrapMajorVersion:1, //版本
currentPage:1, //当前页数
numberOfPages:5, //最多显示Page页
totalPages:10, //所有数据可以显示的页数
onPageClicked:function(e,originalEvent,type,page){
}
}
$("#page").bootstrapPaginator(options);
})
</script>
如果bootstrapMajorVersion:1 时,则上面的分页标签用 div
如果bootstrapMajorVersion:3 时,则上面的分页标签用 ul
其中:currentPage 是当前你所在的页数 numberOfPages 是分页按钮可见的最多数 totalPages 是所有数据能分的页数(这些 options(选项)是在初始化分页控件的时候使用的。)
在onPageClicked 事件中 page 参数标识你点击页数时所在的页数。
完整代码如下:
<link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="reference/bootstrap-paginator.js"></script>
初始化分页控件
<div id="page"></div>
<script type="text/javascript">
$(function(){
var options={
bootstrapMajorVersion:1, //版本
currentPage:1, //当前页数
numberOfPages:5, //最多显示Page页
totalPages:10, //所有数据可以显示的页数
onPageClicked:function(e,originalEvent,type,page){
}
}
$("#page").bootstrapPaginator(options);
})
</script>
如果bootstrapMajorVersion:1 时,则上面的分页标签用 div
如果bootstrapMajorVersion:3 时,则上面的分页标签用 ul
其中:currentPage 是当前你所在的页数 numberOfPages 是分页按钮可见的最多数 totalPages 是所有数据能分的页数(这些 options(选项)是在初始化分页控件的时候使用的。)
在onPageClicked 事件中 page 参数标识你点击页数时所在的页数。
完整代码如下:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> <script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="reference/bootstrap-paginator.js"></script> </head> <body> <div id="page"></div> <script type="text/javascript"> $(function(){ var options={ bootstrapMajorVersion:1, //版本 currentPage:1, //当前页数 numberOfPages:5, //最多显示Page页 totalPages:10, //所有数据可以显示的页数 onPageClicked:function(e,originalEvent,type,page){ console.log("e"); console.log(e); console.log("originalEvent"); console.log(originalEvent); console.log("type"); console.log(type); console.log("page"); console.log(page); } } $("#page").bootstrapPaginator(options); }) </script> </body> </html>
相关文章推荐
- bootstrap-button.js插件源码分析
- bootstrap栅格系统自定义列
- 让Bootstrap 3兼容IE8浏览器
- 让bootstrap兼容ie6 ie7 ie8 ie9 ie10 ie11的解决方法
- BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
- Bootstrap IIFE
- Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
- BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
- 百度地图标注和Bootstrap样式冲突解决方案
- bootstrap学习笔记-下拉菜单
- BootStrap Table 重写API实现 可对列选择性的搜索
- bootstrap学习笔记-导航和导航条
- Bootstrap3使用typeahead插件实现自动补全功能
- 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
- 使用Bootstrap typeahead插件实现搜索框自动补全的方法
- Bootstrap 标签页(Tab)插件
- ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
- bootstrap modal 垂直居中对齐
- BootstrapTest_3(基础排板样式)
- 使用Bootstrap typeahead插件实现搜索框自动补全的方法