学习Angularjs分页指令

网络编程 2025/2/2 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

在项目中许多页面都用到了分页，然后每个页面都有许多重复的分页代码，于是自己写了一份简易的分页指令，简化页面的代码，且容易维护，写在博客中当做备份，方便以后查阅。
以下是定义指令及其应用的步骤：

1.指令定义
定义一个js文件，page-directive.js，用来写分页的指令代码，这个文件中包含了分页的模板，以下是js文件中的所有代码：

'use strict';
(function () {
 angular.module('template/pageInit/pageInit.html', []).run([
  '$templateCache',function($templateCache) {
   $templateCache.put('template/pageInit/pageInit.html',
    '<ul class="pagination-main">\n'+
    ' <li class="prev-page" ng-class="{disabled:pageData.currentPage==1}" title="首页">\n'+
    '  <a href="javascript:void(0);" ng-click="on_loadPage(1)"><span class="fa fa-fast-backward"></span></a>\n'+
    ' </li>\n'+
    ' <li class="prev-page" ng-class="{disabled:pageData.currentPage==1 }">\n'+
    '  <a href="javascript:void(0);" ng-click="on_prev()" title="上一页"><span class="fa fa-step-backward"></span></a>\n'+
    ' </li>\n'+
    ' <li class="data-page" ng-repeat="page in pageData.pages" ng-class="{\'first-page\': page==1, \'last-page\': page==pageData.totalPage}">\n'+
    '  <a ng-if="page!=\'...\'" href="javascript:void(0);" ng-class="{\'bg-custom\': page==pageData.currentPage}" ng-click="on_loadPage(page, tabData)">{{ page }}</a>\n'+
    '  <a ng-if="page==\'...\'" href="javascript:void(0);" ng-class="{\'bg-custom\': page==pageData.currentPage}" ng-click="">{{ page }}</a>\n'+
    ' </li>\n'+
    ' <li class="next-page" ng-class="{disabled:pageData.currentPage==pageData.totalPage}">\n'+
    '  <a href="javascript:void(0);" ng-click="on_next()" title="下一页"><span class="fa fa-step-forward"></span></a>\n'+
    ' </li>\n'+
    ' <li class="skip-page"><div><input type="text" placeholder="" ng-model="inpage">\n'+
    '  <input type="button" value="跳转" ng-click="on_loadPage(inpage)"></div>\n'+
    ' </li>\n'+
    ' <li class="data-num"><a class="cursor-text" href="#"><span>共{{pageData.count}}条</span></a></li>\n'+
    '</ul>\n'+
    ''
   );
  }
 ]);
 angular.module('pageInit', ['template/pageInit/pageInit.html'])
  .directive('pageInit',['pageinitTemplate', function(pageinitTemplate) {
   return {
    restrict  : 'AE',
    templateUrl: function (tElement, tAttrs) {
     return tAttrs.templateUrl || pageinitTemplate.getPath();
    },
    replace  : true,
    scope   : {
     pageData    : '=',
     prev      : '&',
     next      : '&',
     loadPage    : '&'
    },
    link      : function(scope, element, attrs) {
     scope.on_prev = function() {
      if(scope.prev) {
       scope.prev();
      }
     };
     scope.on_next = function() {
      if(scope.next) {
       scope.next();
      }
     };
     scope.on_loadPage = function(page) {
      scope.inpage = undefined;
      if(scope.loadPage) {
       scope.loadPage({page: page});
      }
     };
    }
   };
  }])
  .provider('pageinitTemplate', function () {
   var templatePath = 'template/pageInit/pageInit.html';
   this.setPath = function (path) {
    templatePath = path;
   };

   this.$get = function () {
    return {
     getPath: function () {
      return templatePath;
     }
    };
   };
  });
}).call(window);

2.分页样式控制
建议写在单独的.css文件中，首先新建pageSync.css文件，以下是具体样式

.pagination-main {
 display: inline-block;
 padding-left: 0;
 margin: 0 0;
 border-radius: 4px;
 vertical-align: middle;
}
.pagination-main li.prev-page > a {
 border: 0;
}
.pagination-main li.next-page > a {
 border: 0;
 border-left: 1px;
 margin-left: 0;
}
.pagination-main li.first-page > a {
 border-top-left-radius: 0;
 border-bottom-left-radius: 0;
}
.pagination-main li.last-page > a {
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
}
.pagination-main li div {
 width: 80px;border: 1px solid #DDDDDD;background-color: #ffffff;float: left;padding: 0;
}
.pagination-main li.skip-page input[type='text'] {
 width: 24px;height: 20px;border: 0;text-align: center;
}
.pagination-main li.skip-page input[type='button'] {
 padding: 0 4px 1px 10px;border: 0;border-left: 1px solid #dddddd;background-color: #ffffff
}
.pagination-main li.data-num > a {
 border: 0;
 margin-left: 0;
}
.pagination-main > li {
 display: inline;
}
.pagination-main > li:first-child > a,
.pagination-main > li:first-child > span {
 /*margin-left: 0;
 border-top-left-radius: 4px;
 border-bottom-left-radius: 4px;*/
}
.pagination-main > .active > a,
.pagination-main > .active > span,
.pagination-main > .active > a:hover,
.pagination-main > .active > span:hover,
.pagination-main > .active > a:focus,
.pagination-main > .active > span:focus {
 z-index: 2;
 color: #fff;
 cursor: default;
 background-color: #428bca;
 border-color: #428bca;
}
.pagination-main > li > a,
.pagination-main > li > span {
 position: relative;
 float: left;
 /*padding: 6px 12px;*/
 padding: 1px 8px;
 margin-left: -1px;
 line-height: 1.42857143;
 color: #428bca;
 text-decoration: none;
 background-color: #fff;
 border: 1px solid #ddd;
}
.pagination-main > .disabled > span,
.pagination-main > .disabled > span:hover,
.pagination-main > .disabled > span:focus,
.pagination-main > .disabled > a,
.pagination-main > .disabled > a:hover,
.pagination-main > .disabled > a:focus {
 color: #999;
 cursor: not-allowed;
 background-color: #fff;
 border-color: #ddd;
}

3.分页查询方法
我在factory中自定义了分页查询的方法，共用，方便代码的维护。在angular中与后台的交互默认是异步的，我这里写成同步查询了，首先定义js文件pageSync.service.js，以下是factory的全部内容：

'use strict';
angular.module('app').factory('PageSync', ['$http', '$q', function Page($http, $q) {
 var rowCollectionPage = [];
 var totalPage = 1;
 var pages = [];
 var endPage = 1;
 var load = function(url, currentPage, pageSize,deferred) {
  var json = {rowCollectionPage: [], totalPage: 1, currentPage:currentPage "color: #800000">1）.页面上的代码：
我的代码中分页是写在table中的tfoot里面了，prev()、next()、loadPage(page)均为在页面对应的controller中定义的方法



<table>
<thead>
 <tr>
  <th>序号</th>
  <th>列名1</th>
  <th>列名2</th>
  <th style="width: 150px;text-align: center;">操作</th>
 </tr>
</thead>
<tbody>
 <tr ng-if="!noTableData" ng-repeat="row in pageData.rowCollectionPage">
  <td>{{!!row.id "text-align: center;"><a href='#'>修改</a></td>
 </tr>
 <tr ng-if="noTableData" ng-repeat="data in pageData.rowCollectionPage">
  <td ng-if="$index == 0" colspan="4" style="text-align: center;">没有数据！</td>
  <td ng-if="$index != 0" colspan="4"></td>
 </tr>
 </tbody>
<tfoot>
 <tr>
  <td style="text-align: center;" colspan="6">
   <div>
    <page-init page-data="pageData" prev="prev()" next="next()" load-page="loadPage(page)"></page-init>
   </div>
  </td>
 </tr>
</tfoot>
</table>




2）.controller中的代码
首先要引用factory，将PageSync在controller中引用，如下：
angular.module('app').controller('MyCtrl', function(PageSync) {});
在分页查询之前要做一些准备工作：
//pageData中设置分页数据集合、总页数、页码集合、数据总数，loadTime为自定义的参数，用来记录时间状态（访问数据前及返回数据后）

$scope.pageData = {rowCollectionPage: [], totalPage: 1, currentPage:1, pages: [],count: 0, loadTime: 'before'};

// 这里用来计算table的高度，根据实际情况来。

$scope.tabHeight = $scope.height-48-37-10-42-5;

// 计算实际中一页有多少行数据

$scope.pageSize = parseInt(($scope.tabHeight-15-34-34-39)/34);
然后再controller中写如下的方法



// 分页查询
$scope.load = function(row) {
 $scope.surgeonPageData.rowCollectionPage = Common.setPageRow([],$scope.pageSize);
 $scope.noSurgeonData = false;
 $scope.surgeonPageData.loadTime = 'before';
 PageSync.load(url, $scope.pageData.currentPage, $scope.pageSize).then(function(data) {
  $scope.pageData = data;
  if(($scope.pageData.loadTime=='after'&& $scope.pageData.count==0) || $scope.pageData.loadTime=='before') {
   $scope.noTableData = true;
  }
 });
};
// 下一页
$scope.next = function() {
 if ($scope.pageData.currentPage < $scope.pageData.totalPage) {
  PageSync.next(url, $scope.pageData.currentPage, $scope.pageSize).then(function(data) {
   $scope.pageData = data;
  });
 }
};
// 上一页
$scope.prev = function() {
 if ($scope.pageData.currentPage > 1) {
  PageSync.prev(url, $scope.pageData.currentPage, $scope.pageSize).then(function (data) {
   $scope.pageData = data;
  });
 }
};
// 点击页码跳转
$scope.loadPage = function(page) {
 $scope.inpage = undefined;
 var intPage;
 if (typeof page == 'string') {
  if(page!="") {
   intPage = parseInt(page, 10);
  } else {
   intPage = 0;
  }
 } else {
  intPage = page;
 }

 if ($scope.pageData.totalPage <= 1) {

 } else if (intPage == undefined || intPage == null) {
  alert('请填写跳转页码！');
 } else if(intPage <= 0 || intPage > $scope.pageData.totalPage) {
  alert('跳转页码应大于0,小于总页数'+$scope.pageData.totalPage);
 } else if ($scope.pageData.currentPage != page) {
  PageSync.loadPage(url, $scope.pageData.currentPage, $scope.pageSize, page).then(function (data) {
   $scope.pageData = data;
  });
 }
};




5.结果 

最终的实现效果如下图： 




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Angularjs,分页,指令

标签：

Angularjs,分页,指令

幽灵资源网 Design By www.bzswh.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

幽灵资源网 Design By www.bzswh.com

评论“学习Angularjs分页指令”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

学习Angularjs分页指令

Angularjs,分页,指令

AngularJS内建服务$location及其功能详解

仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件

评论“学习Angularjs分页指令”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

友情链接