angulatJs——例: 前端数据分页展示
2023-09-27 14:29:10 时间
注:css用的是amazeui
html:
···
<div style="height:500px;overflow: auto;"> <table class="am-table" style="width:100%;padding: 10px 30px "> <tr> <td>序号</td> <td>姓名</td> <td>电话</td> <td>年龄</td> </tr> <tr ng-repeat="items in list" class="gradeX"> <td>{{$index+1}}</td> <td>{{items.name}}</td> <td>{{items.tel}}</td> <td>{{items.age}}</td> </tr> </table> </div> <ul class="am-pagination am-pagination-right"> <li ng-class="{true:'am-disabled'}[ 1 == currentPage]"><a href ng-click="firstPage()">首页</a></li> <li ng-class="{true:'am-disabled'}[ 1 == currentPage]"><a href ng-click="prevPage()">上一页</a></li> <li ng-class="pageTool_fun({{n}},'1')" ng-repeat="n in pageToolCursor"><a id="{{n}}" href ng-click="gotoXpage(n)">{{n}}</a></li> <li><a>共{{itemsPerPage}}页 ({{totalRow}}条数据)</a></li> <li ng-class="{true:'am-disabled'}[ (currentPage) == itemsPerPage]"><a href ng-click="nextPage()">后一页</a></li> <li ng-class="{true:'am-disabled'}[ (currentPage) == itemsPerPage]"><a href ng-click="lastPage()">尾页</a></li> </ul>
···
js:
···
var reqUrl = '***'; var dataObj = { //针对个人后台的请求数据,根据情况修改 'pageNumber': 1, 'pageSize': 10, 'id': '' } $scope.list = []; $scope.currentPage = 1; //当前页 $scope.totalRow = 0; //总条数 $scope.itemsPerPage = 0; //总页数 $scope.pageToolCursor = []; //截取的页码
//首页 $scope.firstPage = function() { dataObj.pageNumber = 1; $http({ method: 'get', params: { param: $.toJSON(dataObj) //针对个人用params传参 }, data: {}, url: reqUrl }) .success(function(response, status, headers, config) { var rstate = response.result; if (rstate == '0') { var _data = response.message; $scope.list = _data.list; $scope.currentPage = _data.pageNumber; $scope.totalRow = _data.totalRow; $scope.itemsPerPage = _data.itemsPerPage; //初始化页码下标,最多只取前9页 var itemsNum = 9; if ($scope.itemsPerPage < 9) { itemsNum = $scope.itemsPerPage; } for (i = 1; i <= itemsNum; i++) { $scope.pageToolCursor.push(i); } } else { alert('获取数据失败!'); } }) .error(function(response, status, headers, config) { alert('获取数据失败..'); }); } //上一页 $scope.prevPage = function() { if (!($scope.currentPage == 1)) { var reqpages = $scope.currentPage - 1; dataObj.pageNumber = reqpages; $http({ method: 'get', params: { param: $.toJSON(dataObj) }, data: {}, url: reqUrl }) .success(function(response, status, headers, config) { var rstate = response.result; if (rstate == "0") { var _data = response.message; $scope.list = _data.list; $scope.currentPage = _data.pageNumber; $scope.totalRow = _data.totalRow; $scope.itemsPerPage = _data.itemsPerPage;
var pageToolCursor = $scope.pageToolCursor; if ($scope.currentPage <= pageToolCursor[0]) { if (pageToolCursor[0] == 1) {return; } var arrayObj = new Array(); if ($scope.currentPage < 9) { $scope.pageToolCursor = ['1', '2', '3', '4', '5', '6', '7', '8', '9']; } else { for (i = $scope.currentPage; i > $scope.currentPage - 9; i--) { arrayObj.unshift(i); } $scope.pageToolCursor = arrayObj; } } } else { alert("获取数据失败 !"); } }).error(function(response, status, headers, config) { alert('获取数据失败..'); }); } }; //下一页 $scope.nextPage = function() { if (!($scope.currentPage == $scope.itemsPerPage)) { var reqpages = $scope.currentPage + 1; dataObj.pageNumber = reqpages; $http({ method: 'get', params: { param: $.toJSON(dataObj) }, data: {}, url: reqUrl }) .success(function(response, status, headers, config) { var rstate = response.result; if (rstate == "0") { var _data = response.message; $scope.list = _data.list; $scope.currentPage = _data.pageNumber; $scope.totalRow = _data.totalRow; $scope.itemsPerPage = _data.itemsPerPage;
var pageToolCursor = $scope.pageToolCursor;if ($scope.currentPage >= pageToolCursor[pageToolCursor.length - 1]) { if (pageToolCursor[pageToolCursor.length - 1] == $scope.itemsPerPage) { return; } var arrayObj = new Array(); var enditems = 0; var compareNUm = $scope.itemsPerPage - pageToolCursor[pageToolCursor.length - 1]; if (compareNUm < 9 && compareNUm > 0) { enditems = $scope.itemsPerPage - pageToolCursor[pageToolCursor.length - 1]; for (i = $scope.currentPage + enditems; i > $scope.currentPage + enditems - 9; i--) { arrayObj.unshift(i); } } else { enditems = 9; for (i = $scope.currentPage; i < $scope.currentPage + enditems; i++) { arrayObj.push(i); } } $scope.pageToolCursor = arrayObj; } } else { alert("获取数据失败!"); } }) .error(function(response, status, headers, config) { alert('获取数据失败..'); }); } }; //尾页 $scope.lastPage = function() { if ($scope.currentPage == $scope.itemsPerPage) { return; } var reqpages = $scope.itemsPerPage; dataObj.pageNumber = reqpages; $http({ method: 'get', params: { param: $.toJSON(dataObj) }, data: {}, url: reqUrl }) .success(function(response, status, headers, config) { var rstate = response.result; if (rstate == "0") { var _data = response.message; $scope.list = _data.list; $scope.currentPage = _data.pageNumber; $scope.totalRow = _data.totalRow; $scope.itemsPerPage = _data.itemsPerPage; var arrayObj = new Array(); if ($scope.itemsPerPage > 9) { for (i = $scope.itemsPerPage; i > $scope.itemsPerPage - 9; i--) { arrayObj.unshift(i); } $scope.pageToolCursor = arrayObj; } } else { alert("获取数据失败!"); } }) .error(function(response, status, headers, config) { alert('获取数据失败..'); }); }; //按页面 进入对应页 $scope.gotoXpage = function(x) { if (x > $scope.itemsPerPage) { return; } var reqpages = x; dataObj.pageNumber = reqpages; $http({ method: 'get', params: { param: $.toJSON(dataObj) }, data: {}, url: reqUrl }) .success(function(response, status, headers, config) { var rstate = response.result; if (rstate == "0") { var _data = response.message; $scope.list = _data.list; $scope.currentPage = _data.pageNumber; $scope.totalRow = _data.totalRow; $scope.itemsPerPage = _data.itemsPerPage; } else { alert("获取数据失败!"); } }) .error(function(response, status, headers, config) { alert('获取数据失败..'); }); }; //设置页码 - 当前页 高亮显示 $scope.pageTool = function(n) { var currentPage = $scope.currentPage; var returStr = ""; if (n == currentPage) { returStr = "am-active"; } if (n > $scope.itemsPerPage) { returStr = "am-disabled"; } return returStr; }; ···
相关文章
- web前端技术练习题
- 聊聊前端和后台的数据交互与协议
- TP6奇葩的bug-后端自动运行两遍程序,但是前端是第一次的数据,session也会自动清空
- 前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
- 138.(前端)数据统计显示图表——vue子组件的挂载与echarts基本效果实现
- 122.(前端)商品管理增加动态参数显示——tabs上一级获取数据发送请求使用checkbox展示数据
- 101.(前端)分类管理分类数据请求优化——多次发送请求优化与默认显示问题
- 91.(前端)增加商品分类实现——Cascader中获取参数发送给后端添加数据
- 90.(前端)增加商品分类显示——Cascader 级联选择器的使用
- 82.(前端)商品分类介绍与组件配置——子组件挂载的方式与分类数据的结构搭建
- 81.(前端)分配权限实现——用路由来接收参数实现展开行中选数据功能
- 79.(前端)分配权限数据回显——element-ui的树形结构回显功能的使用
- 61.(前端)权限管理实现——从数据库中获取数据展示在前端,使用插槽和Tag标签美化数据展示
- 52.(前端)增加用户表单小bug修复——二次打开后表单数据重置与关闭页面图标的失效
- 39.(前端)欢迎页面的设置
- 14个优秀 JS 前端框架、库、工具及其使用时机
- 设计师该如何学习前端?
- 接收前端参数(反序列化) 且进行校验(含自定义校验) + 接口前段数据插入数据库
- 如何优雅地校验后端接口数据,不做前端背锅侠
- 前端工作中常用Css知识点整理
- [译] 前端调试技巧与诀窍
- 2018web前端面试总结
- 前端代码组织优化--小demo(进阶你的思路)
- 前端进阶之路:初涉Less
- 重学前端 6 # JavaScript类型有哪些你不知道的细节?
- 实战技巧-学会这一招让前端工程师都刮目相看
- 前端性能监控你会监控哪些数据? 如何做?
- 前端知识要点记录
- [转]前端版本控制工具 gulp或者Grunt插件 基于nodejs