如何在使用 Angular js 显示数据时进行分页?

Posted

技术标签:

【中文标题】如何在使用 Angular js 显示数据时进行分页?【英文标题】:How can i do pagination while showing data using angular js? 【发布时间】:2015-08-20 01:34:12 【问题描述】:

下面是我的代码:

<table class="table table-hover">

    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>age</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success" ng-repeat="x in data">
        <td> x.fname </td>
        <td> x.lname </td>
        <td> x.age </td>
      </tr>

    </tbody>
  </table>

这里的数据将来自控制器。控制器将返回大量数据。所以我想在这里添加分页,每页 10 条记录。我可以添加引导分页,但我不知道如何将此结果拆分为不同的并使用分页显示在不同的页面中。

【问题讨论】:

看看这个 Angular-Paging brantwills.github.io/Angular-Paging docs.angularjs.org/api/ng/filter/limitTo 我个人使用@Spir 在第二个答案中找到here 和[fiddle] (jsfiddle.net/SAWsA/11) 的方法。我最终将分页放在它自己的控制器中,以便我可以更轻松地重用它 【参考方案1】:

您可以采用两种方法:

前端分页: 后端分页

请查找plunker列表以供参考

    Method 1 Method 2 Method 3

你也可以使用引导分页指令 html

<div ng-controller="PaginationDemoCtrl">
<h4>Default</h4>
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
<pre>The selected page no: currentPage</pre>
<button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

<hr />
<h4>Pager</h4>
<pager total-items="totalItems" ng-model="currentPage"></pager>

<hr />
<h4>Limit the maximum visible buttons</h4>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<pre>Page: bigCurrentPage / numPages</pre>

控制器:

  angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) 
  $scope.totalItems = 64;
  $scope.currentPage = 4;

  $scope.setPage = function (pageNo) 
    $scope.currentPage = pageNo;
  ;

  $scope.pageChanged = function() 
    $log.log('Page changed to: ' + $scope.currentPage);
  ;

  $scope.maxSize = 5;
  $scope.bigTotalItems = 175;
  $scope.bigCurrentPage = 1;
);

【讨论】:

【参考方案2】:

你也可以使用SmartTable,它是一个非常好的基本表格操作插件,还支持客户端和服务器端配置

http://lorenzofox3.github.io/smart-table-website/

【讨论】:

以上是关于如何在使用 Angular js 显示数据时进行分页?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Angular.js 在特定长度后忽略文本

Angular.js数据绑定时自动转义html标签及内容

使用 Angular JS 在提交时隐藏表单

使用Angular JS时如何在ng-repeat内的img标签中显示图像?

使用 Angular JS 的自定义分页 - 需要在第一页显示 div 元素,这应该在第二页上重复单击下一步

从 MongoDB 在 Angular.js 中显示图像