Angularjs+Bootstrap实现分页指令
2017-07-29 11:50
671 查看
本插件的开发目的主要给前端同学使用,本人是专注于后台开发的,对css样式不熟悉,但逼于前端要求做一个共公组件方便日常开发,所以这个插件在样式上可能不适合大部分人,喜欢的拿走吧,不喜欢的也请别喷。
2.Bootstrap 3
在自己的环境里请自行配置js和css,本文不作这方面的介绍。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/15/d415d6c85e229d766ad97692b3b616c5.png)
效果逻辑:
1.当前页码默认选中高亮状态
2.页码少于等于1,则“上一页”为不可点击状态
3.页码大于等于最大页码,则“下一页”为不可点击状态
4.页码输入框的范围是 1~最大页码,当超过最大页码时,“确定”按钮不可点
5.如果总记录数不存在或少于1,则整个插件不显示任何效果
2.Angularjs 添加引用
3.html里使用本指令
参数说明:
4.controller的实现
这里需要定义两个方法 1、上面所提到的回调方法$scope.queryPage 2、与服务器交互的查询方法 $scope.query
$scope.queryPage接收的参数为指令返回的,固定为pageNum
$scope.query 实现如下,大家可以自行修改,以下只是我的实现,其中有两个地方需要注意,分页对象必须要声明,声明后要延时执行指令,时间最好大于200ms,我这里写的是1秒后执行
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/15/dbc7aadfc6ffe83edd78e2e72d34c294.png)
整个指令的使用就是以上这些,很久没有写博客了,这次也算是在学习了一天后的少少分享,可能有些地方写得不太好,欢迎留言!
一、使用环境
1.Angularjs 1.x2.Bootstrap 3
在自己的环境里请自行配置js和css,本文不作这方面的介绍。
二、效果图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/15/d415d6c85e229d766ad97692b3b616c5.png)
效果逻辑:
1.当前页码默认选中高亮状态
2.页码少于等于1,则“上一页”为不可点击状态
3.页码大于等于最大页码,则“下一页”为不可点击状态
4.页码输入框的范围是 1~最大页码,当超过最大页码时,“确定”按钮不可点
5.如果总记录数不存在或少于1,则整个插件不显示任何效果
三、使用步骤
1.下载文件:etgyd.pagination.min.js 添加到页面里<script type="text/javascript" src="etgyd.pagination.min.js"></script>
2.Angularjs 添加引用
angular.module('Webapp', ['etgyd.pagination']);
3.html里使用本指令
<div> <etgyd-pagination page-model="pagevo" page-control="pageConfig" call-function="queryPage(pagevo.pageNum)" ></etgyd-pagination> </div>
参数说明:
参数 | 说明 | 例子 |
page-model | { pageNum: 1,//当前页码 pageSize: 10,//每页大小 total: 200,//总记录数 pages: 20,//总页数,允许为空 pagesLength: 5//显示分页按钮数,必须为奇数,默认为5,允许为空 } | |
page-control | 开放的api,目前只有extent() | $scope.pageConfig.extent() |
call-function | 回调方法,可以自定义查询,此处会返回点击的页码 | $scope.queryPage=function(num){ $scope.query("",num); } |
这里需要定义两个方法 1、上面所提到的回调方法$scope.queryPage 2、与服务器交互的查询方法 $scope.query
$scope.queryPage接收的参数为指令返回的,固定为pageNum
$scope.query 实现如下,大家可以自行修改,以下只是我的实现,其中有两个地方需要注意,分页对象必须要声明,声明后要延时执行指令,时间最好大于200ms,我这里写的是1秒后执行
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/15/dbc7aadfc6ffe83edd78e2e72d34c294.png)
整个指令的使用就是以上这些,很久没有写博客了,这次也算是在学习了一天后的少少分享,可能有些地方写得不太好,欢迎留言!
相关文章推荐
- angularjs+bootstrap实现自定义分页的实例代码
- Angular.js+Bootstrap实现表格分页
- AngularJS+Bootstrap 分页功能实现,同时支持模糊查询分页
- AngularJS directive 实现分页包装指令
- Angular.js+Bootstrap实现表格分页
- Angular.js与Bootstrap相结合实现表格分页代码
- Angular.js与Bootstrap相结合实现表格分页代码
- AngularJS+Bootstrap实现多文件上传与管理
- 本文实例讲述了AngularJS+bootstrap实现动态选择商品功能。分享给大家供大家参考,具体如下: 项目中后台一个商品库,新建活动时动态选择所需商品
- Bootstrap+angularjs+MVC3+分页技术+角色权限验证系统
- Vue.js结合bootstrap实现分页控件
- 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
- [后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页
- Angular+Bootstrap+Spring Boot实现分页功能实例代码
- angular+bootstrap+spring boot实现分页
- Node.js中Bootstrap-table的两种分页的实现方法
- 分享一个本人开发的angularjs+bootstrap+Spring+mybatis实现的java web系统项目
- Maven + Spring MVC+Mybatis + MySQL +AngularJS + Bootstrap 实现简单微博应用(三)前后台交互
- Angular.js+Bootstrap实现固定表头案例
- Vue.js 结合bootstrap 前端实现分页效果