Angularjs 实现分页功能及示例代码


Posted in Javascript onSeptember 14, 2016

基于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思想。

效果图

Angularjs 实现分页功能及示例代码
 

调用代码

<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;
   });
 
  }
 
  //配置分页基本参数
  $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 实现分页功能的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
Angularjs CURD 详解及实例代码
Sep 14 #Javascript
Angular Module声明和获取重载实例代码
Sep 14 #Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 #Javascript
Angular 应用技巧总结
Sep 14 #Javascript
AngularJS 所有版本下载地址
Sep 14 #Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 #Javascript
Angularjs 制作购物车功能实例代码
Sep 14 #Javascript
You might like
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
python实现simhash算法实例
2014/04/25 Python
python中文编码问题小结
2014/09/28 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
浅析Python 条件控制语句
2020/07/15 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
安全生产承诺书
2014/03/26 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
2015年打非治违工作总结
2015/04/02 职场文书