在AngularJS中的表上使用分页

Question

在AngularJS中的表上使用分页

use*_*246 2 javascript pagination angularjs

我试图分页一个有500个条目的表,每页有10个条目.为了实现这一点,我遇到了一个GitHub 页面.

但它没有用.我想知道我在这里失踪了什么.

我的代码,

  <!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>

Run Code Online (Sandbox Code Playgroud)

的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;
    };
    }
    })();

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

首先从这里下载dirPagination.js.
在您的网页上包含dirPagination.js文件,如:

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

之后在脚本file.code中为分页添加dir-paginate指令,如下所示:

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

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

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

Run Code Online (Sandbox Code Playgroud)

然后在HTML页面中添加分页控件,以放置下面给出的First,Next,Previous和Last.Code按钮:

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

归档时间：	10 年，6 月前
查看次数：	2596 次
最近记录：	8 年，8 月前