[实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator
2015-12-20 17:13
513 查看
写在前面
考虑到数据量的问题,特引入bootstrap的分页插件。插件下载地址:https://github.com/lyonlai/bootstrap-paginator系列文章
[EF]vs15+ef6+mysql code first方式[实战]MVC5+EF6+MySql企业网盘实战(1)
[实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册
[实战]MVC5+EF6+MySql企业网盘实战(3)——验证码
[实战]MVC5+EF6+MySql企业网盘实战(4)——上传头像
[Bootstrap]modal弹出框
[实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面,头像等比例压缩
[实战]MVC5+EF6+MySql企业网盘实战(5)——页面模板
[实战]MVC5+EF6+MySql企业网盘实战(5)——ajax方式注册
[实战]MVC5+EF6+MySql企业网盘实战(6)——ajax方式登录
[实战]MVC5+EF6+MySql企业网盘实战(7)——文件上传
[实战]MVC5+EF6+MySql企业网盘实战(8)——文件下载、删除
[实战]MVC5+EF6+MySql企业网盘实战(9)——编辑文件名
[实战]MVC5+EF6+MySql企业网盘实战(10)——新建文件夹
[实战]MVC5+EF6+MySql企业网盘实战(11)——新建文件夹2
[实战]MVC5+EF6+MySql企业网盘实战(12)——新建文件夹和上传文件
[实战]MVC5+EF6+MySql企业网盘实战(13)——编辑文件夹
[实战]MVC5+EF6+MySql企业网盘实战(14)——逻辑重构
[实战]MVC5+EF6+MySql企业网盘实战(14)——思考
[实战]MVC5+EF6+MySql企业网盘实战(15)——逻辑重构2
[实战]MVC5+EF6+MySql企业网盘实战(16)——逻辑重构3
[实战]MVC5+EF6+MySql企业网盘实战(17)——思考2
[实战]MVC5+EF6+MySql企业网盘实战(18)——文件上传,下载,修改
[实战]MVC5+EF6+MySql企业网盘实战(19)——BJUI和ztree
[实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator
步骤
引入必需的js和css文件。然后初始化分组插件,options的配置,单击页数可以ajax请求服务端获取数据实现无刷新分页。<script> $(function () { var options = { size: "large", bootstrapMajorVersion: 3, //当前页 currentPage: 1, //可以改变显示的页码数 numberOfPages: 5, //总页数 totalPages: 11, onPageClicked: function (e, originalEvent, type, page) { //页码单击事件 console.log(page); } }; var element = $('#logPage'); element.bootstrapPaginator(options); }); </script> <ul id='logPage' style="margin:0 auto; margin-left:30%;"></ul>
结果
总结
引入一款分页的插件,项目中很多地方都会用到。相关文章推荐
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
- Bootstrap-栅格布局实例
- Bootstrap-栅格系统自适应布局
- EF+MVC+Bootstrap 项目实践 Day11
- Bootstrap快速学习笔记(1)排版系列之一
- bootstrap表单校验之bootstrapvalidator
- Bootstrap采样方法的python实现
- bootstrap-datetimepicker和uploadify应用总结
- bootstrap-fileinput实现serverlet文件上传功能
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- EF+MVC+Bootstrap 项目实践 Day10
- Bootstrap学习第二课--Button
- bootstrap学习资料汇总
- Bootstrap学习第一课
- HTML+CSS+Bootstrap:第一个页面,仿Airbnb首页
- bootstrap学习
- 手机自动化测试:appium源码分析之bootstrap六 (下)
- 手机自动化测试:appium源码分析之bootstrap六 (上)
- 手机自动化测试:appium源码分析之bootstrap五 下
- 手机自动化测试:appium源码分析之bootstrap五 上