最新消息:创业路上,需要创新思维,也需要知识的沉淀。

angularjs分页教程

Javascript myfse 1523浏览 0评论

angularjs强大的双向绑定,以及对SEO的不友好…暂时让它只能在后台管理系统方面大展身手,而管理系统,一个很重要的组件就是分页了。angularjs实现分页也不是很难。看代码

控制器

  1. app.controller(‘BusinessCtrl’, [‘$scope’, ‘$rootScope’, ‘BusinessService’, function ($scope, $rootScope, BusinessService) {
  2.     $rootScope.title = ‘流水列表’;
  3.  
  4.     $scope.currentPage = 1;
  5.     $scope.totalPage = 1;
  6.     $scope.pageSize = 40;
  7.     $scope.pages = [];
  8.     $scope.endPage = 1;
  9.     //获取总流水
  10.     BusinessService.total().success(function (data) {
  11.         $scope.total = data;
  12.     });
  13.  
  14.     $scope.load = function () {
  15.         BusinessService.list($scope.currentPage, $scope.pageSize).success(function (data) {
  16.             $scope.items = data.list;
  17.             //获取总页数
  18.             $scope.totalPage = Math.ceil(data.count / $scope.pageSize);
  19.             $scope.endPage = $scope.totalPage;
  20.             //生成数字链接
  21.             if ($scope.currentPage > 1 && $scope.currentPage < $scope.totalPage) {
  22.                 $scope.pages = [
  23.                     $scope.currentPage  1,
  24.                     $scope.currentPage,
  25.                     $scope.currentPage + 1
  26.                 ];
  27.             } else if ($scope.currentPage == 1 && $scope.totalPage > 1) {
  28.                 $scope.pages = [
  29.                     $scope.currentPage,
  30.                     $scope.currentPage + 1
  31.                 ];
  32.             } else if ($scope.currentPage == $scope.totalPage && $scope.totalPage > 1) {
  33.                 $scope.pages = [
  34.                     $scope.currentPage  1,
  35.                     $scope.currentPage
  36.                 ];
  37.             }
  38.         });
  39.     };
  40.  
  41.     $scope.next = function () {
  42.         if ($scope.currentPage < $scope.totalPage) {
  43.             $scope.currentPage++;
  44.             $scope.load();
  45.         }
  46.     };
  47.  
  48.     $scope.prev = function () {
  49.         if ($scope.currentPage > 1) {
  50.             $scope.currentPage–;
  51.             $scope.load();
  52.         }
  53.     };
  54.  
  55.     $scope.loadPage = function (page) {
  56.         $scope.currentPage = page;
  57.         $scope.load();
  58.     };
  59.  
  60. }]);

Service

  1. //流水业务类
  2. app.factory(‘BusinessService’, [‘$http’, function ($http) {
  3.     var list = function (page, size) {
  4.         return $http({
  5.             params: {
  6.                 page: page,
  7.                 size: size
  8.             },
  9.             url: ‘/merchants/business/list’
  10.         });
  11.     };
  12.  
  13.     var total = function () {
  14.         return $http.get(‘/merchants/business/total’);
  15.     };
  16.  
  17.     var post = function (business) {
  18.         return $http.post(‘/merchants/business/post’, business);
  19.     };
  20.  
  21.     return {
  22.         list: function (page, size) {
  23.             return list(page, size);
  24.         },
  25.         total: function () {
  26.             return total();
  27.         },
  28.         post: function (business) {
  29.             return post(business);
  30.         }
  31.     };
  32. }]);

html部分

  1.     <ul class=“pagination” ng-show=“totalPage>1″>
  2.         <li ng-class=“{true:’active’}[currentPage==1]”><a href=“javascript:void(0)”
  3.                                                           ng-click=“currentPage=1;load()”>首页</a></li>
  4.         <li ng-class=“{true:’disabled’}[currentPage==1]”><a href=“javascript:void(0);” ng-click=“prev()”>上一页</a></li>
  5.         <li ng-repeat=“page in pages”><a href=“javascript:void(0);” ng-click=“loadPage(page)”>{{ page }}</a></li>
  6.         <li ng-class=“{true:’disabled’}[currentPage==totalPage]”><a href=“javascript:void(0);” ng-click=“next()”>下一页</a>
  7.         </li>
  8.         <li ng-class=“{true:’active’}[currentPage==totalPage]”><a href=“javascript:void(0)”
  9.                                                                   ng-click=“currentPage=totalPage;load()”>末页</a></li>
  10.     </ul>

其实,关键在于生成数字链接那里有点麻烦,仔细想一下执行过程就容易写了。

好了。这里是个完整的分页代码,以后有啥分页的都可以这样写啦~

转载请注明:全端网 » angularjs分页教程