如何在Angular JS中进行分页

How to do Pagination in Angular JS?

本文关键字：分页 JS Angular      更新时间：2023-09-26

我有一个动态数组。我想遍历到那个数组并添加分页。目前，我使用ng repeat进行遍历，但如何使用ng repay添加分页。请帮帮我？

这很简单。首先决定一个页面上需要显示多少个项目。让我们假设为10；

var resultsPerPage = 10;

现在，根据总结果，您可以计算页数。

var noOfPages = Math.ceil(array.length / resultsPerPage);

现在您需要跟踪当前页面。最初是1；

var currentPage = 1;

现在在视图中，您可以通过将currentPage与resultsPerPage 相乘来显示当前页面值

例如，如果您在第1页中，则需要显示0到9之间的值。所以你需要做这样的事情。

var endIndex = (currentPage * resultsPerPage) - 1;
var startIndex = (currentPage - 1) * resultsPerPage;

希望能有所帮助！

如果你需要ui的分页，我建议你使用智能表插件它易于集成和使用。

使用ng repeat，您只能显示$scope中某个变量的数据。

您必须添加另一个系统来查询数据，并将它们设置在ng重复的$scope中。有很多分页系统，但这只是一个小例子：

控制器：

$scope.displayMe = [ .... ] ;
$scope.previous= function(){
   // do your logic to get the good data
   $scope.displayMe = newData ;
}
$scope.next= function(){
   // do your logic to get the good data
   $scope.displayMe = newData ;
}

HTML

<div ng-repeat="data in displayMe"> {{data }} </div>
<button ng-click="previous()"><-- </button>
<button ng-click="next()">--> </button>

有许多即插即用分页指令可用。

我正在使用目录分页。因为这很容易添加到项目中。无需在控制器中进行任何设置或逻辑操作。

只需添加一个属性，就可以随意放置在导航中。

这是目录分页的链接

如果您在中有当前页面和页面中的行数

var params = {
    'page' : 1,
    'count' : 10
};

然后进行

data.slice((params.page() - 1) * params.count(), params.page() * params.count());

但是，如果要构建一个表，请考虑ngTable。

相关文章：