基于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 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
Javascript实现单例模式
Jan 24 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
Webpack3+React16代码分割的实现
Mar 03 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目录遍历函数opendir用法实例
2014/11/20 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
javascript 三种编解码方式
2010/02/01 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
JsDom 编程小结
2011/08/09 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Django REST framwork的权限验证实例
2020/04/02 Python
Keras loss函数剖析
2020/07/06 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
奖学金感谢信
2015/01/21 职场文书
2015年质检工作总结
2015/05/04 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android