[实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator

时间:2022-02-08 06:53:07

写在前面

考虑到数据量的问题,特引入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>

结果

[实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator

[实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator 

总结

引入一款分页的插件,项目中很多地方都会用到。