基于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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
Javascript调用C#代码
Jan 17 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
原生js实现分页效果
Sep 23 Javascript
js作用域及作用域链工作引擎
Jul 07 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
python中的itertools的使用详解
2020/01/13 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
几个判断型的面试题
2012/07/03 面试题
企业活动策划方案
2014/06/02 职场文书
物业保安岗位职责
2014/07/02 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python