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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
Js切换功能的简单方法
Nov 23 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 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 URL验证正则表达式
2011/07/19 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP单例模式详细介绍
2015/07/01 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
python挖矿算力测试程序详解
2019/07/03 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
个人实用的自我评价范文
2013/11/23 职场文书
团队精神的演讲稿
2014/05/14 职场文书
护士实习求职信
2014/06/22 职场文书
学习考察心得体会
2014/09/04 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
博士生专家推荐信
2014/09/26 职场文书
2014年行风建设工作总结
2014/12/01 职场文书