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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
Vue计算属性的使用
Aug 04 Javascript
vue获取当前激活路由的方法
Mar 17 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
解析URI与URL之间的区别与联系
2013/11/22 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
微信小程序实现发红包功能
2018/07/11 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Linux下多个Python版本安装教程
2018/08/15 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
小学生教师节广播稿
2015/08/19 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
python实现简单聊天功能
2021/07/07 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
Elasticsearch 聚合查询和排序
2022/04/19 Python