在 AngularJS 中的 table 上使用分页

Question

我正在尝试对具有 500 个条目的 table 进行分页，每页 10 个条目。为了实现这一点，我遇到了 GitHub page。

但是没有用。我想知道我在这里缺少什么。

也是我的代码，

  <!DOCTYPE html>
  <html ng-app="plunker">

  <head>
      <meta charset="utf-8" />
      <title> Pagination example </title>
      <link rel="stylesheet" href="style.css" />
      <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
      <script src="script.js"></script>

   <body ng-controller="PageDetails as pg">
     <table dir-paginate="comments in pg.comment | itemsPerPage: 10" > 
       <thead>
          <tr>
            <th>POST_ID</th>
            <th>ID</th>
            <th>NAME</th>
            <th>EMAIL</th>
            <th>BODY</th>
          </tr>
      </thead>
      <tbody>
       <tr ng-repeat="comments in pg.comment">
         <td>{{comments.postId}}</td>
         <td>{{comments.id}}</td>
         <td>{{comments.name}}</td>
         <td>{{comments.email}}</td>
         <td>{{comments.body}}</td>
       </tr>
      </tbody>
   </table>
   <dir-pagination-controls></dir-pagination-controls>
   </body>

  </html>

script.js

  (function() {

      angular.module('plunker', []);

      angular.module('plunker').controller('PageDetails', PageFn);

      function PageFn($http) {
       var pg = this;
       pg.comment = [];

      details();

      function details() {
         $http({
         method: 'GET',
         url: 'http://jsonplaceholder.typicode.com/comments'
         }).success(function(data, status) {
         console.log(data);
        pg.comment = data;
        }).error(function(data, status) {
        console.log(data);
      });
    }

    pg.add = function() {
        pg.newComment.id = pg.comment[pg.comment.length - 1].id + 1;
        pg.comment.push(pg.newComment);
        pg.newComment = null;
    };
    }
    })();

Answer 1

如果你研究 demo on the page of angularUtils，你会发现他们使用：

1) 在 html:

中包含带有库的文件

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

2) angular 实用程序库作为依赖项包含在应用程序中，请参阅 script.js

var myApp = angular.module('myApp', ['angularUtils.directivses.dirPagination']);

所以您需要在您的应用程序文件中添加这 2 个东西才能使分页正常工作。

Answer 2

改变

<table dir-paginate="comments in pg.comment | itemsPerPage: 10" >

到

<table>

然后改变

<tr ng-repeat="comments in pg.comment">

到

<tr dir-paginate="comments in pg.comment | itemsPerPage: 10" >

Answer 3

首先从这里下载 dirPagination.js。
在您的页面上包含 dirPagination.js 文件，例如：

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

之后在脚本中添加用于分页的 dir-paginate 指令 file.code 如下：

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

然后在 tr 标签中添加给定的代码行：

 <tr  dir-paginate="comments in
 pg.comment|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">

然后在 HTML 页面中添加分页控件，用于放置 First、Next、Previous 和 Last.Code 按钮，如下所示：

<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true" > </dir-pagination-controls>

在 AngularJS 中的 table 上使用分页

Using pagination on a table in AngularJS

javascript

pagination

angularjs