Angularjs 实现分页功能及示例代码  更新时间:2016年09月14日 11:53:33   作者:garfieldzf   这篇文章主要介绍了Angularjs 实现分页功能及示例代码的相关资料,需要的朋友可以参考下 基于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思想。 效果图   调用代码 ID FirstName LastName Status Address {{emp.ID}} {{emp.FirstName}} {{emp.LastName}} {{emp.Status}} {{emp.Address}}  插件和Demo下载 http://yunpan.cn/cQEhnLrpnkniQ  访问密码 be74 以上就是AngularJS 实现分页功能的资料整理,后续继续补充相关资料,谢谢大家对本站的支持! 您可能感兴趣的文章: angularjs表格分页功能详解 angularjs实现的前端分页控件示例 ANGULARJS中使用JQUERY分页控件 AngularJS实现分页显示数据库信息 基于Angularjs实现分页功能 Angularjs分页查询的实现 学习Angularjs分页指令 AngularJS 与Bootstrap实现表格分页实例代码 详解angularjs结合pagination插件实现分页功能 AngularJs分页插件使用详解 Angularjs 分页功能 相关文章 AngularJS 模型详细介绍及实例代码 本文主要介绍 AngularJS模型,这里详细介绍了AngularJS 模型中的知识点,并提供实例代码,有需要的小伙伴可以参考下 2016-07-07 使用AngularJS实现表单向导的方法 这篇文章主要介绍了使用AngularJS实现表单向导的方法,AngularJS是一款高人气JavaScript库,需要的朋友可以参考下 2015-06-06 Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证) AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确。现在小编给大家整理了两种方法,需要的的朋友参考下吧 2017-05-05 angular组件间传值测试的方法详解 这篇文章主要给大家介绍了关于如何测试angular组件间传值的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular组件具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-05-05 探讨AngularJs中ui.route的简单应用 这篇文章主要介绍了AngularJs中ui.route的简单应用,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2016-11-11 AngularJS iframe跨域打开内容时报错误的解决办法 这篇文章主要介绍了AngularJS iframe跨域打开内容时报错误的解决办法,需要的朋友可以参考下 2015-01-01 Angular 2父子组件数据传递之@Input和@Output详解(下) 这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-07-07 Angular5.0 子组件通过service传递值给父组件的方法 这篇文章主要介绍了Angular5.0 子组件通过service传递值给父组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 AngularJS 在同一个界面启动多个ng-app应用模块详解 这篇文章主要介绍了AngularJS 在同一个界面启动多个ng-app应用模块详解的相关资料,需要的朋友可以参考下 2016-12-12 AngularJS中取消对HTML片段转义的方法例子 这篇文章主要介绍了AngularJS中取消对HTML片段转义的方法例子,在一些需要显示HTML的地方,就要取消AngularJS的转义,本文就介绍了这种方法,需要的朋友可以参考下 2015-01-01 最新评论

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

效果图


 

调用代码

<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 实现分页功能的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • angularjs表格分页功能详解
  • angularjs实现的前端分页控件示例
  • ANGULARJS中使用JQUERY分页控件
  • AngularJS实现分页显示数据库信息
  • 基于Angularjs实现分页功能
  • Angularjs分页查询的实现
  • 学习Angularjs分页指令
  • AngularJS 与Bootstrap实现表格分页实例代码
  • 详解angularjs结合pagination插件实现分页功能
  • AngularJs分页插件使用详解
张贴在3