基于Angularjs实现分页功能


Posted in Javascript onMay 30, 2016

前言

学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然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>

以上内容是小编给大家介绍的基于Angularjs实现分页功能的实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 #Javascript
JS组件Bootstrap Select2使用方法解析
May 30 #Javascript
AngularJs表单验证实例详解
May 30 #Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 #Javascript
jquery获取form表单input元素值的简单实例
May 30 #Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 #Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 #Javascript
You might like
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php全排列递归算法代码
2012/10/09 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
Numpy数组的保存与读取方法
2018/04/04 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
Vue h函数的使用详解
2022/02/18 Vue.js
Win10 Anaconda安装python-pcl
2022/04/29 Servers