基于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中常见陷阱小结
Apr 27 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
js常用DOM方法详解
Feb 04 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
js实现碰撞检测
Jan 29 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网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
JavaScript中的事件处理
2008/01/16 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python 元组的使用方法
2020/06/09 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
广播体操比赛口号
2014/06/10 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
2015年校长新年寄语
2014/12/08 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Python如何用re模块实现简易tokenizer
2022/05/02 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis