对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。
Paginator服务（一个很简单的实现）应该允许用户告诉它如何获取数据，可以给定offset参数、limit参数，以及每页的数据条数。然后它将会在内部处理以下逻辑：获取哪些数据？下一页是什么？是否存在下一页？等等。
实例所提供的实现方式是：把currentPageItems字段存储在一个缓存中，如果可用的话就从这个字段里获取数据，否则就调用fetchFunction函数。当然，此服务还可以进一步扩展，实现在服务内部缓存数据。
service.js
angular.module('services', []).factory('Paginator', function() {
//虽然这是一个服务，但是每次用户调用它时都会获得一个全新的Paginator。这是因为我们会返回一个function，当它被执行时会返回一个对象
return function(fetchFunction, pageSize) {
var paginator = {
hasNextVar : false,
next: function() {
if(this.hasNextVar) {
this.currentOffset += pageSize;
this._load();
}
},
_load: function() {
var self = this;
fetchFunction(this.currentOffset, pageSize+1, function(items) {
self.currentPageItems = items.slice(0, pageSize);
self.hasNextVar = items.length === pageSize + 1;
});
},
hasNext: function() {
return this.hasNextVar;
},
previous: function() {
if(this.hasPrevious()) {
this.currentOffset -= pageSize;
this._load();
}
},
hasPrevious: function() {
return this.currentOffset !== 0;
},currentPageItems: [],
currentOffset:0
};
//加载第一页
paginator._load();
return paginator;
};
});
在调用Paginator服务的时候，需要两个参数：fetch函数和每一页的大小。fetch函数所期望的签名如下：
fetchFunction(offset, limit, callback);
当Paginator需要加载并显示一个特定的页面时，就会调用此函数，同时向它传递正确的offset和limit参数。在这个函数的内部，它可以从一个很大的数组中截取数据，也可以调用服务发起一次加载数据的操作。当数据可用时，fetch函数会调用callback函数，并把数据传给它。
Paginator暴露了它上面的currentPageItems属性，这个属性可以绑定到模板中的迭代器上（也可以使用其他展示数据的方式）。hasNext()和hasPrevious()可以用来计算何时显示Next和Previous Page链接，当点击链接时，它需要根据情况调用next()或者previous()函数。
如果需要从服务器上加载一页数据，那么应该使用以上服务呢？以下是一种可能的控制器，它每次从服务端获取搜索之后的一页数据，示例如下：
controller.js
var app = angular.module('myApp', ['myApp.services']);
app.controller('MainCtrl', ['$scope', '$http', 'Paginator', function($scope, $http, Paginator) {
$scope.query = 'Testing';
var fetchFunction = function(offset, limit, callback) {
$http.get('/search', {params:{query:$scope.query, offset: offset, limit: limit}}).success(callback);
};
$scope.searchPaginator = Paginator(fetchFunction, 10);
}]);
使用Pagination服务的HTML页面如下：
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8"></meta>
<title>Pagination Service</title>
<script src="angular/angular.js"></script>
<script src="service.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="query"></input>
<ul>
<li ng-repeat="item in searchPaginator.currentPageItems">
{{item}}
</li>
</ul>
<a href="" ng-click="searchPaginator.previous()" ng-show="searchPaginator.hasPrevious()"><<Prev</a>
<a href="" ng-click="searchPaginator.next()" ng-show="searchPaginator.hasNext()">Next >></a>
</body>
</html>
相关推荐
AngularJS的分页功能是提高大型数据集加载效率的关键，它允许用户逐步加载数据，而不是一次性加载所有内容，从而优化用户体验。 **一、AngularJS分页基础** 1. **模块和依赖注入**: 在AngularJS中，我们首先需要...
Angularjs实现分页功能是前端开发中常用的一种技术手段，它允许开发者在处理大量数据时，按照用户需要的页数来展示数据，提高页面加载速度和用户体验。在本篇文章中，我们将探讨Angularjs实现分页的原理和具体方法，...
本文档详细介绍了如何基于AngularJS实现分页功能，提供了原理说明、使用方法和示例代码，对于需要在AngularJS应用中实现分页功能的开发者来说，具有很高的参考价值。 AngularJS的分页功能实现主要依赖于几个关键的...
总而言之，AngularJs实现分页功能不带省略号涉及到对ng-repeat指令的深入理解和过滤器的自定义编写。通过合理利用AngularJs提供的内置指令和编写必要的逻辑代码，我们可以实现满足特定需求的分页功能。文档所展示的...
本篇文档将介绍如何利用AngularJS实现分页功能及其背后的分页算法。 ### 知识点概述 1. **分页概念**：分页是将数据分割成若干个小部分展示给用户，每部分称为一页。这样用户不需要一次性加载所有数据，而是可以按...
本文实例为大家分享了angularjs实现分页和搜索展示的具体代码，供大家参考，具体内容如下 话不多说,上代码 <html class=no-js ng-app=myApp> <body ng-controller=mainController> <th>name <...
在本文中，我们将深入探讨如何使用AngularJS实现分页功能，这是一个非常常见的需求，尤其是在处理大量数据时。AngularJS是一个强大的前端JavaScript框架，它提供了一种优雅的方式来组织和管理Web应用的逻辑。分页...
**核心知识点二：AngularJS中实现分页的思路** 1. 设置每页数据的条数，这通常由用户界面的配置决定。 2. 获取总数据条数，并根据每页的条数计算出总页数。 3. 生成页码列表，并为每一页设置链接。 4. 为跳转到特定...
本文将深入探讨AngularJS中实现分页控件的关键知识点。 ### 1. 模块与依赖注入 在AngularJS中，一切皆为模块。创建分页控件首先需要一个自定义模块，通过`angular.module()`函数定义。分页功能通常会依赖于`...
通过结合`tm.pagination`这样的插件，可以轻松地在前端实现分页功能，同时与后端进行有效通信，获取并展示分页后的数据。这种功能不仅提高了页面加载速度，还提升了用户体验，是现代Web应用中不可或缺的一部分。
总结起来，AngularJS实现分页显示数据库信息涉及的知识点包括： - AngularJS核心概念：模块、控制器、视图、作用域。 - 内建服务$location的使用，实现URL的动态变化和状态管理。 - AngularJS路由技术的掌握，实现...
在这个例子中，后端人员利用AngularJS实现了动态表格，尽管可能还有改进的空间，但已经能够满足基本的需求。如果你在实际使用中遇到问题或有进一步的需求，可以继续深入学习AngularJS的高级特性，如服务（Services）...
在实现分页功能时，我们需要考虑以下几个关键概念： 1. **分页配置**：配置分页参数，如每页显示的条目数量、当前页数、总页数等，这通常通过控制器或服务来完成。 2. **数据绑定**：AngularJS的核心特性之一是...
在AngularJS中，实现分页功能主要涉及到以下几个关键知识点： 1. **指令（Directives）**：AngularJS中的指令是用来扩展HTML的一种机制。我们可以创建自定义指令来封装分页逻辑，例如`ng-pager`或`pager-directive`...
Pagination插件是一种可以集成到AngularJS应用中的工具，用于实现分页功能。分页是一种常见的用户界面设计模式，用于将长列表或数据集分割成可管理的块，以便用户可以逐步浏览，而不需要一次性加载所有数据。在Web...