4、實現(xiàn)方法調(diào)用后我們需要根據(jù)每次點擊分頁插件頁碼時重新提交后臺來獲取相應(yīng)頁碼數(shù)據(jù)。在調(diào)用的頁碼中我使用了$watch來監(jiān)控。我初次使用時是把調(diào)用函數(shù)放在了插件的onchange中，結(jié)果發(fā)現(xiàn)每次都會觸發(fā)兩次后臺。這個地方需要注意。

5、我把請求后臺封裝成了Service層，然后在Controller里調(diào)用，也符合MVC思想。

效果圖

調(diào)用代碼

<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>{{emp.ID}}</td>
<td>{{emp.FirstName}}</td>
<td>{{emp.LastName}}</td>
<td>{{emp.Status}}</td>
<td>{{emp.Address}}</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;
});
}
//配置分頁基本參數(shù)
$scope.paginationConf = {
currentPage: 1,
itemsPerPage: 5
};
/***************************************************************
當頁碼和頁面記錄數(shù)發(fā)生變化時監(jiān)控后臺查詢
如果把currentPage和itemsPerPage分開監(jiān)控的話則會觸發(fā)兩次后臺事件。
***************************************************************/
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
}]);
//業(yè)務(wù)類
app.factory('BusinessService', ['$http', function ($http) {
var list = function (postData) {
return $http.post('/Employee/GetAllEmployee', postData);
}
return {
list: function (postData) {
return list(postData);
}
}
}]);
</script>

以上內(nèi)容是小編給大家介紹的基于Angularjs實現(xiàn)分頁功能的實例代碼，希望對大家有所幫助！

您可能感興趣的文章: