您的位置：首页 > Web前端 > AngularJS

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

2015-07-22 00:00 676 查看
<!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>

<title></title>

<%

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

%>

<script type="text/javascript" src="<%=basePath %>/js/bussiness/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="<%=basePath %>/js/angular/1.2.28/angular.min.js"></script>

<script type="text/javascript" src="<%=basePath %>/js/angular-ui/bootstrap/0.11/ui-bootstrap.min.js"></script>

<script type="text/javascript" src="<%=basePath %>/js/bootstrap/bootstrap.min.js"></script>

<link href="<%=basePath%>css/bootstrap/2.3.1/css_cerulean/bootstrap.min.css" rel="stylesheet" type="text/css"></link>

<link href="<%=basePath%>css/bootstrap/3.3.4/pagination/bootstrap.min.css" rel="stylesheet" type="text/css"></link>

<link href="<%=basePath %>/css/css.css" rel="stylesheet" type="text/css"></link>

<link href="<%=basePath %>/css/1.css" rel="stylesheet" type="text/css"></link>

<style>

a {

cursor: pointer;

}

</style>

<script type="text/javascript">

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>

<html ng-app="cacheApp">

<body ng-controller="cacheCtr" ng-init="load()">

<table id="tab1" class="table table-bordered table-condensed" width="100%">

<thead>

<tr class="navbar-inner-gt">

<th width="8%">id</th>

<th width="25%">键名</th>

<th width="30%">值</th>

<th width="37%">描述</th>

</tr>

</thead>

<tbody id="tbody1">

<tr ng-repeat="s in cacheList" ng-click="choose(s)">

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

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

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

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

</tr>

</tbody>

</table>

<div class="col-md-9">

<ul class="pagination" ng-show="totalPage>1">

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

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

<li ng-class="{true:'disabled'}[currentPage==1]"><a href="javascript:void(0);" ng-click="prev()">上一页</a></li>

<li ng-repeat="page in pages"><a href="javascript:void(0);" ng-click="loadPage(page)">{{ page }}</a></li>

<li ng-class="{true:'disabled'}[currentPage==totalPage]"><a href="javascript:void(0);" ng-click="next()">下一页</a>

</li>

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

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

</ul>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航