基於Angularjs實現分頁
前言
學習任何一門語言前肯定是有業務需求來驅動你去學習它，當然ng也不例外，在學習ng前我第一個想做的demo就是基於ng實現分頁，除去基本的計算思路外就是使用指令封裝成一個插件，在需要分頁的列表頁面內直接引用。
插件
在封裝分頁插件時我實現了幾種方式總體都比較零散，最後找到了一個朋友(http://www.miaoyueyue.com/archives/813.html)封裝的插件，覺還不錯，讀了下他的源碼就直接在項目中使用了。
原理和使用說明
1、插件源碼主要基於angular directive來實現。
2、調用時關鍵地方是後台請求處理函數，也就是從後台取數據。
3、插件有兩個關鍵參數currentPage、itemsPerPage，當前頁碼和每頁的記錄數。
4、實現方法調用後我們需要根據每次點擊分頁插件頁碼時重新提交後台來獲取相應頁碼數據。 在調用的頁碼中我使用了$watch來監控。 我初次使用時是把調用函數放在了插件的onchange中，結果發現每次都會觸發兩次後台。這個地方需要注意。
5、我把請求後台封裝成了Service層，然後在Controller裡調用，也符合MVC思想。
效果圖
調用代碼
<div ng-app="DemoApp" ng-controller="DemoController"> <table> <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; }); } //配置分頁基本參數$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>插件和Demo下載
http://yunpan.cn/cQEhnLrpnkniQ 訪問密碼be74
以上就是AngularJS 實現分頁功能的資料整理，後續繼續補充相關資料，謝謝大家對本站的支持！