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 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
vue-swiper的使用教程
Aug 30 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 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
全国中波电台频率表
2020/03/11 无线电
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python表示矩阵的方法分析
2017/05/26 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python manage.py runserver流程解析
2019/11/08 Python
flask实现验证码并验证功能
2019/12/05 Python
Python文件操作函数用法实例详解
2019/12/24 Python
Python字典dict常用方法函数实例
2020/11/09 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
金融专业大学生自我评价
2014/01/09 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
市场策划求职信
2014/08/07 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书