在AngularJS的表中使用分頁

我想分頁有500個條目的表，每頁有10個條目。爲了實現這個我遇到了GitHub page。在AngularJS的表中使用分頁

但它沒有奏效。我想知道我在這裏錯過了什麼。

而且我的代碼，

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

來源

2015-06-08 user2948246

什麼在你的script.js？似乎你錯過了整個角度使用庫包括 – shershen

我現在包括.js – user2948246

你是什麼意思「沒有工作」？你只發布了一個plunker的部分，並且鏈接到了你在HTML中引用的指令，但是似乎沒有加載腳本或者依賴於.... – Claies

首先從這裏下載dirPagination.js。
包括像您的網頁上dirPagination.js文件：

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

腳本是添加DIR-PAGINATE指令進行分頁後文件代碼如下：

angular.module（'plun ker'，['angularUtils.directives.dirPagination']）;

然後在tr標籤附加給定的代碼行：

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

然後加入您的HTML頁面中的分頁控件用於放置First，Next，Previous和Last按鈕。下面的代碼給出：

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

來源

2015-12-21 09:03:52

如果你研究的angularUtils的demo on the page，你可以看到，他們使用：

1）包括文件與在html中的庫：

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

2）角程序庫包含的應用程序中的扶養，看到的script.js

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

所以你需要添加的兩件事情在你的應用程序文件進行分頁工作。

來源

2015-06-08 22:38:49 shershen

變化

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

來源

2015-09-19 12:04:47 Niedes

在AngularJS的表中使用分頁

回答

相關問題