angulatJs——例: 前端数据分页展示
注：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; }; ···
