如何使用 Angular.js 实现分页/表格布局？答案

【问题标题】：How to achieve pagination/table layout with Angular.js?如何使用 Angular.js 实现分页/表格布局？
【发布时间】：2018-02-19 11:05:12
【问题描述】：

假设我收到一个包含 15 个以上对象的对象字面量，并且我需要将它们显示在一个漂亮的布局中（而不是全部排成一行），那么控制换行/分页何时结束的最有效方法是什么？

现在我在表格行上使用 ng-repeat，结果是一个长而薄的表格，只有一列。

为澄清而编辑。可以在对象/更多参数中包含对象。这是我的对象：

$scope.zones = [
        {"name": "Zone 1",
         "activity": "1"},
        {"name": "Zone 2",
         "activity": "1"},
        {"name": "Zone 3",
         "activity": "0"},
        {"name": "Zone 4",
         "activity": "0"},
        {"name": "Zone 5",
         "activity": "0"},
        {"name": "Zone 6",
         "activity": "0"},
        {"name": "Zone 7",
         "activity": "1"},
        {"name": "Zone 8",
         "activity": "0"},
        {"name": "Zone 9",
         "activity": "0"},
        {"name": "Zone 10",
         "activity": "0"},
        {"name": "Zone 11",
         "activity": "1"},
        {"name": "Zone 12",
         "activity": "1"},
        {"name": "Zone 13",
         "activity": "0"},
        {"name": "Zone 14",
         "activity": "0"},
        {"name": "Zone 15",
         "activity": "1"},
    ];

【问题讨论】：

请发布一个示例，说明您的“具有 15 个以上对象的对象文字”的外观。它是一个对象数组吗？还是包含子对象的对象？等
您想要一种流式布局来显示您的项目吗？如果是这样，我不确定这是一个角度问题，如果没有角度，你会怎么做？在使用带有float: left 或display: inline-block 的固定高度div 之前，我已经完成了它。我不明白你的问题与分页有什么关系......
如果您提供更多关于您想要完成的任务或某些“不工作”的代码的详细信息会有所帮助

标签： angularjs angular-ui angularjs-ng-repeat

【解决方案1】：

我会使用表格并在控制器中实现分页来控制显示的数量和移动到下一页的按钮。 This Fiddle 可能会对你有所帮助。

 <table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>
                        <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
                        <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
                        <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
                        <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
                        <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
                        <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
                    </tr>
                </thead>
                <tfoot>
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                                <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="prevPage()">« Prev</a>
                                </li>
                                <li ng-repeat="n in range(pagedItems.length)"
                                    ng-class="{active: n == currentPage}"
                                ng-click="setPage()">
                                    <a href ng-bind="n + 1">1</a>
                                </li>
                                <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
                                    <a href ng-click="nextPage()">Next »</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tfoot>
                <tbody>
                    <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.description}}</td>
                        <td>{{item.field3}}</td>
                        <td>{{item.field4}}</td>
                        <td>{{item.field5}}</td>
                    </tr>
                </tbody>
            </table>

小提琴示例中的 $scope.range 应该是：

$scope.range = function (size,start, end) {
    var ret = [];        
    console.log(size,start, end);

       if (size < end) {
        end = size;
        if(size<$scope.gap){
             start = 0;
        }else{
             start = size-$scope.gap;
        }

    }
    for (var i = start; i < end; i++) {
        ret.push(i);
    }        
     console.log(ret);        
    return ret;
};

【讨论】：

jsfiddle 不工作。有人帮我运行这个演示。
@user2249160 你在哪里打开的？在 chrome 中它可以工作
@dman True，因为 id 被定义为字符串。我将其更改为数字并更改了 Fiddle 链接。谢谢
@dman 是的，在这个演示中，我一次加载所有内容。但是从服务器加载每个页面并不是很多事情
@MaximShoustin：设置$scope.itemsPerPage = 50; 会导致一个时髦的结果。从 -2 到 2 的页面。

【解决方案2】：

这是我的解决方案。 @Maxim Shoustin 的解决方案在排序方面存在一些问题。我还将整个事情包装成一个指令。唯一的依赖是 UI.Bootstrap.pagination，它在分页方面做得很好。

这里是plunker

这里是github source code.

【讨论】：

【解决方案3】：

我使用这个解决方案：

自从我使用：ng-repeat="obj in objects | filter : paginate" 过滤行以来，它更简洁了。也使它与 $resource 一起工作：

http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview

【讨论】：

【解决方案4】：

在这里，我已经解决了我的 angularJS 分页问题，并在服务器端 + 视图端进行了一些调整您可以检查代码它会更有效。我所要做的就是输入两个值开始编号和结束编号，它将表示返回的 json 数组的索引。

这是角度

var refresh = function () {
    $('.loading').show();
    $http.get('http://put.php?OutputType=JSON&r=all&s=' + $scope.CountStart + '&l=' + $scope.CountEnd).success(function (response) {
        $scope.devices = response;


        $('.loading').hide();
    });
};

如果你仔细看 $scope.CountStart 和 $scope.CountStart 是我通过 api 传递的两个参数

这是下一个按钮的代码

$scope.nextPage = function () {
    $('.loading').css("display", "block");
    $scope.nextPageDisabled();


    if ($scope.currentPage >= 0) {
        $scope.currentPage++;

        $scope.CountStart = $scope.CountStart + $scope.DevicePerPage;
        $scope.CountEnd = $scope.CountEnd + $scope.DevicePerPage;
        refresh();
    }
};

这是上一个按钮的代码

$scope.prevPage = function () {
    $('.loading').css("display", "block");
    $scope.nextPageDisabled();

    if ($scope.currentPage > 0) {
        $scope.currentPage--;

        $scope.CountStart = $scope.CountStart - $scope.DevicePerPage;
        $scope.CountEnd = $scope.CountEnd - $scope.DevicePerPage;

        refresh();

    }
};

如果页码为零，我的上一个按钮将被停用

   $scope.nextPageDisabled = function () {

    console.log($scope.currentPage);

    if ($scope.currentPage === 0) {
        return false;
    } else {
        return true;
    }
};

【讨论】：

【解决方案5】：

带有分页、排序和过滤器的表格

请参阅Angularjs table sorting filter and paging的完整示例

【讨论】：

搜索后分页没有重新排列。我该怎么做？

【解决方案6】：

这是我找到的最简单的分页示例！ http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/

【讨论】：

确实很有帮助。像魅力一样工作。 Angular 7 的更新文档在这里ciphertrick.com/search-sort-pagination-angular

【解决方案7】：

最好的简单即插即用分页解决方案。

https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/#comment-1002

你只需要用自定义指令替换 ng-repeat。

<tr dir-paginate="user in userList|filter:search |itemsPerPage:7">
<td>{{user.name}}</td></tr>

在页面内你只需要添加

<div align="center">
       <dir-pagination-controls
            max-size="100"
            direction-links="true"
            boundary-links="true" >
       </dir-pagination-controls>
</div>

在你的 index.html 中加载

<script src="./js/dirPagination.js"></script>

在你的模块中添加依赖项

angular.module('userApp',['angularUtils.directives.dirPagination']);

这就是分页所需要的。

可能对某人有帮助。

【讨论】：

我几乎完成了自己的编码——我现在已经扔掉了它来使用它。 dirPagination 似乎在整个网络上都竖起了大拇指。它功能强大，具有免费的搜索和排序功能，并且能够在运行时更改每页的项目数，并且就像您所说的那样简单易用。强烈推荐

【解决方案8】：

最简单的方法是使用切片。您对切片进行管道传输并提及您希望显示的部分数据的开始索引和结束索引。这是代码：
HTML

<table>
  <thead>
     ...
  </thead>
  <tbody>
     <tr *ngFor="let row of rowData | slice:startIndex:endIndex">
        ...
     </tr>
  </tbody>
</table>
<nav *ngIf="rowData" aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" (click)="updateIndex(0)" aria-label="Previous">
                <span aria-hidden="true">First</span>
            </a>
        </li>
        <li *ngFor="let i of getArrayFromNumber(rowData.length)" class="page-item">
            <a class="page-link" (click)="updateIndex(i)">{{i+1}}</a></li>

        <li class="page-item">
            <a class="page-link" (click)="updateIndex(pageNumberArray.length-1)" aria-label="Next">
                <span aria-hidden="true">Last</span>
            </a>
        </li>
    </ul>
</nav>

TypeScript

...
public rowData = data // data you want to display in table
public paginationRowCount = 100 //number of records in a page
...
getArrayFromNumber(length) {
        if (length % this.paginationRowCount === 0) {
            this.pageNumberArray = Array.from(Array(Math.floor(length / this.paginationRowCount)).keys());
        } else {
            this.pageNumberArray = Array.from(Array(Math.floor(length / this.paginationRowCount) + 1).keys());
        }
        return this.pageNumberArray;
    }

    updateIndex(pageIndex) {
        this.startIndex = pageIndex * this.paginationRowCount;
        if (this.rowData.length > this.startIndex + this.paginationRowCount) {
            this.endIndex = this.startIndex + this.paginationRowCount;
        } else {
            this.endIndex = this.rowData.length;
        }
    }

教程参考：https://www.youtube.com/watch?v=Q0jPfb9iyE0

【讨论】：