<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/tm.pagination.js"></script>
<style>
.page-list .pagination {
float: left;
}
.page-list .pagination span {
cursor: pointer;
}
.page-list .pagination .separate span {
cursor: default;
border-top: none;
border-bottom: none;
}
.page-list .pagination .separate span:hover {
background: none;
}
.page-list .page-total {
float: left;
margin: 25px 20px;
}
.page-list .page-total input, .page-list .page-total select {
height: 26px;
border: 1px solid #ddd;
}
.page-list .page-total input {
width: 40px;
padding-left: 3px;
}
.page-list .page-total select {
width: 50px;
}
</style>
<div ng-app="DemoApp" ng-controller="DemoController">
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>FirstName</td>
<td>LastName</td>
<td>Status</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in persons">
<td>{{$index+1}}</td>
<td>{{emp.Name}}</td>
<td>{{emp.Num}}</td>
<td>{{emp.Sex}}</td>
</tr>
</tbody>
</table>
<tm-pagination conf="paginationConf"></tm-pagination>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp', ['tm.pagination']);
app.controller('DemoController', ['$scope', 'BusinessService', function ($scope, BusinessService) {
var GetAllEmployee = function () {
var postData = {
pageIndex: $scope.paginationConf.currentPage,
pageSize: $scope.paginationConf.itemsPerPage
}
BusinessService.list(postData).success(function (response) {
$scope.paginationConf.totalItems = response.count;
$scope.persons = response.items;
});
}
//配置分页基本参数
$scope.paginationConf = {
currentPage: 1,
itemsPerPage: 5
};
/***************************************************************
当页码和页面记录数发生变化时监控后台查询
如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。
***************************************************************/
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
}]);
//业务类
app.factory('BusinessService', ['$http', function ($http) {
var list = function (postData) {
return $http.post('/Employee/GetAllEmployee', postData);
}
return {
list: function (postData) {
return list(postData);
}
}
}]);
</script>