基于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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php文件上传简单实现方法
2015/01/24 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python操作yaml说明
2020/04/08 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
银行实习自我鉴定
2013/10/12 职场文书
建筑自我鉴定
2013/10/19 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
法制宣传实施方案
2014/03/13 职场文书
项目合作意向书范本
2014/04/01 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL