angularJS分页实现业务逻辑与分页逻辑的分开

最新推荐文章于 2022-06-18 19:37:04 发布

weixin_34192732

最新推荐文章于 2022-06-18 19:37:04 发布

阅读量109

点赞数

文章标签： javascript xhtml python ViewUI

原文链接：https://my.oschina.net/u/1035715/blog/482438

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<head>

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";

<style>

a {

cursor: pointer;

}

</style>

var BasePath = '<%=basePath %>';

var cacheApp=angular.module('cacheApp',['baseControllers','ui.bootstrap']);

var baseControllers=angular.module('baseControllers',[]);

//控制器

baseControllers.controller('cacheCtr', ['$scope', '$rootScope', 'cacheService', function ($scope, $rootScope, cacheService) {

$rootScope.title = '缓存列表';

$scope.currentPage = 1;

$scope.totalPage = 1;

$scope.pageSize = 10;

$scope.pages = [];

$scope.endPage = 1;

//获取总流水

cacheService.total().success(function (data) {

$scope.total = data.total;

});

$scope.load = function () {

cacheService.list($scope.currentPage, $scope.pageSize).success(function (json) {

$scope.cacheList=json.rows;

//获取总页数

$scope.totalPage = Math.ceil($scope.total / $scope.pageSize);

$scope.endPage = $scope.totalPage;

//生成数字链接

if ($scope.currentPage > 1 && $scope.currentPage < $scope.totalPage) {

$scope.pages = [

$scope.currentPage - 1,

$scope.currentPage,

$scope.currentPage + 1

];

} else if ($scope.currentPage == 1 && $scope.totalPage > 1) {

$scope.pages = [

$scope.currentPage,

$scope.currentPage + 1

];

} else if ($scope.currentPage == $scope.totalPage && $scope.totalPage > 1) {

$scope.pages = [

$scope.currentPage - 1,

$scope.currentPage

];

}

});

};

$scope.next = function () {

if ($scope.currentPage < $scope.totalPage) {

$scope.currentPage++;

$scope.load();

}

};

$scope.prev = function () {

if ($scope.currentPage > 1) {

$scope.currentPage--;

$scope.load();

}

};

$scope.loadPage = function (page) {

$scope.currentPage = page;

$scope.load();

};

}]);

//service

cacheApp.factory('cacheService', ['$http', function ($http) {

var list = function (page, size) {

return $http({

method : 'GET',

url : BasePath + "/cache/search",

params: {

startIndex: page,

pagesize: size

headers : {'Content-Type': 'application/x-www-form-urlencoded'}

});

};

//总的数据量

var total = function () {

return $http({

method : 'GET',

url : BasePath + "/cache/search",

params: {

startIndex: 1,

pagesize: 10

headers : {'Content-Type': 'application/x-www-form-urlencoded'}

});

};

var post = function (business) {

return $http.post('/cache/addOrEditCache', business);

};

return {

list: function (page, size) {

return list(page, size);

total: function () {

return total();

post: function (business) {

return post(business);

}

};

}]);

</script>

</head>

<thead>

</tr>

</thead>

<td>{{s.value}}</td>

<td>{{s.description}}</td>

</tr>

</tbody>

</table>

<li ng-class="{true:'active'}[currentPage==1]"><a href="javascript:void(0)"

ng-click="currentPage=1;load()">首页</a></li>

</li>

<li ng-class="{true:'active'}[currentPage==totalPage]"><a href="javascript:void(0)"

ng-click="currentPage=totalPage;load()">末页</a></li>

</ul>

</div>

</body>

</html>

转载于:https://my.oschina.net/u/1035715/blog/482438

angularJS分页 实现业务逻辑与分页逻辑的分开

angularJS分页实现业务逻辑与分页逻辑的分开