分页实现
来源:互联网 发布:html css js 编辑:程序博客网 时间:2024/05/22 08:26
用了angular,做了一个分页切换,最大值要结合后台的数据来进行判断了
html
<nav aria-label="Page navigation"><ul class="pagination" ng-model="current_page"><li><a href="#" aria-label="Previous" ng-click="previousPage(current_page)"><span aria-hidden="true">«</span></a></li><li ng-repeat="page in page_list"><a ng-click="search_page(page.number)">{{page.number}}</a></li><li><a href="#" aria-label="Next" ng-click="nextPage(current_page)"><span aria-hidden="true">»</span></a></li></ul></nav>
js
var page_step = 10; $scope.page_list = createPageList(1,10); function createPageList(min_page_number,max_page_number){ var ret = [] for(var i=min_page_number;i<=max_page_number;i++){ ret.push({'number':i}); } return ret } $scope.previousPage = function(current_page){ var t = parseInt(current_page / 10); console.log(t); if(t < 1){ return null } else{ min_page_number = current_page - page_step + 1; max_page_number = current_page; $scope.page_list=createPageList(min_page_number,max_page_number); } } $scope.nextPage = function(current_page){ var t = parseInt(current_page / page_step); if(t < 1){ return null } else{ min_page_number = current_page; max_page_number = current_page + page_step - 1; $scope.page_list=createPageList(min_page_number,max_page_number); } } $scope.search_page = function(page_number){ $scope.current_page=page_number; console.log($scope.current_page) }
0 0
- 分页实现
- 分页实现
- 分页实现
- 分页实现
- 分页实现
- 实现分页
- 分页实现
- 分页实现
- 分页实现
- 分页实现
- 分页实现
- ibatis 分页 实现 (物理分页)
- mybatis分页插件实现分页
- 个性化的分页实现
- 分页的实现
- JSP分页技术实现
- JSP分页技术实现
- 实现分页打印功能:
- ajax传过来的值后台接收不到
- Dagger2从0基础使用,到单例注入的正确姿势
- 开启Markdown学习之旅
- FFT详解
- Docker私有仓库Registry的搭建验证
- 分页实现
- 创建Oracle sharding database的例子
- 使用maven创建web项目
- Viewpager+Fragment实现页面的滑动
- easyUI中日期格式化和保留两位小树点
- 基于VirtualBox虚拟机安装Ubuntu图文教程
- ssm java编程遇到从数据库中查询的时间与存储时间不一致
- python自己编写模块
- caffe接口及命令操作