学习Angularjs分页指令


Posted in Javascript onJuly 01, 2016

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

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 ? currentPage:1, pages: []};
  $http.get(url).success(function(rows) {
   rowCollectionPage = setPageRow(rows.list, pageSize);
   // 获取总页数
   totalPage = Math.ceil(rows.count / pageSize);
   endPage = totalPage;
   // 生成数字链接
   if (totalPage <= 7) {
    pages = getPagesLow(totalPage);
   } else {
    pages = getPagesHigh(currentPage, totalPage);
   }
   json.rowCollectionPage = rowCollectionPage;
   json.totalPage = totalPage==0 ? 1 : totalPage;
   json.currentPage = currentPage;
   json.pages = pages;
   json.count = rows.count;
   json.pageSize = pageSize;
   /**
    * 自定义字段,初始化的时候为before,只要经过该分页方法,则字段值变为after
    * before表示未经过该分页方法,after表示经过该分页方法,
    * 前台页面加载的规则:为before时表示表格无数据,为after且pataData.count==0时无数据,否则视为有数据,
    * 也可以说是记录的一个时间状态(访问数据前及返回数据后)
    */
   json.loadTime = 'after';
   deferred.resolve(json);
  });
  return deferred.promise;
 };
 // 总页数小于等于7时 显示所有的页数
 var getPagesLow = function(totalPage) {
  var temp = [];
  for (var i=1; i<totalPage+1; i++) {
   temp.push(i);
  }
  return temp;
 };
 // 总页数大于7时 根据当前页获取7个页码数
 var getPagesHigh = function(currentPage, totalPage) {
  var temp = [];
  if (currentPage < 4) {
   temp = [1, 2, 3, 4, 5, '...', totalPage];
  } else if ((totalPage - currentPage) <= 3) {
   temp = [
    totalPage - 6, totalPage - 5, totalPage - 4,
    totalPage - 3, totalPage - 2, totalPage - 1, totalPage
   ];
  } else {
   temp = [
    currentPage - 2, currentPage - 1, currentPage,
    currentPage + 1, currentPage + 2, '...', totalPage
   ];
  }
  return temp;
 };
 // 项目中table的高度是根据浏览器窗口的高度计算的来的,是动态的
 // 因为要把分页固定在table最下方,所以无数据的用空行进行代替
 var setPageRow = function(rowArr, pageSize) {
  var temp = [];
  if (rowArr != undefined) {
   for (var i = 0; i < rowArr.length; i++) {
    temp.push(rowArr[i]);
   }
   for (var j = 0; j < pageSize - rowArr.length; j++) {
    temp.push({});
   }
  } else {
   for (var k = 0; k < pageSize; k++) {
    temp.push({});
   }
  }
  return temp;
 };
 return {
  load: function(url, currentPage, pageSize) {
   var deferred = $q.defer();
   url += '&' + currentPage + '&' + pageSize;
   return load(url, currentPage, pageSize, deferred);
  },
  next: function(url, currentPage, pageSize) {
   var deferred = $q.defer();
   if (currentPage < endPage) {
    currentPage++;
   }
   url += '&' + currentPage + '&' + pageSize;
   return load(url, currentPage, pageSize, deferred);
  },
  prev: function(url, currentPage, pageSize) {
   var deferred = $q.defer();
   currentPage--;
   url += '&' + currentPage + '&' + pageSize;
   return load(url, currentPage, pageSize, deferred);
  },
  loadPage: function(url, currentPage, pageSize, page) {
   var deferred = $q.defer();
   if (currentPage != page) {
    currentPage = page;
    url += '&' + currentPage + '&' + pageSize;
    return load(url, currentPage, pageSize, deferred);
   }
  }
 }
}]);

4.使用指令

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 ? $index+1+(pageData.currentPage-1)*pageSize : ''}}</td>
  <td>{{row.args1}}</td>
  <td>{{row.args2}}</td>
  <td style="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分页指令

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现的日期控件具体代码
Nov 18 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 #Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 #Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 #Javascript
AngularJS优雅的自定义指令
Jul 01 #Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 #Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 #Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 #Javascript
You might like
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
express.js中间件说明详解
2019/03/19 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
详解Django CAS 解决方案
2019/10/30 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
python创建文本文件的简单方法
2020/08/30 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
自荐信范文
2013/12/10 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
女生抽烟检讨书
2014/10/05 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB