dirpagination正在运作,但无法看到控件

时间:2016-10-25 07:38:42

标签: angularjs

dirpagination有效,因为它每行提供10个项目,但我无法看到表格底部的控件进行导航。

//创建标签和表格 <div ng-controller="MyController" class="my-controller"> <div class="container"> <h2>Legislaotrs</h2>
 <ul class="nav nav-tabs">
 <li><a href="#" class="active">By State</a></li>
 <li><a href="#">House</a></li>
 <li><a href="#">Senate</a></li></ul>
 </div>
 <form class="form-inline">
 <div class="form-group">
 <label >Search</label>
 <input type="text" ng-model="search" class="form-control" placeholder="Search">
 </div>
 </form>
 <table class="table table-striped table-hover">
 <thead>
 <tr>
 <th>Party</th>
<th>Name</th>
<th>Chamber</th>
<th>District</th>
<th>State</th>
</tr>
 </thead>
 <tbody>
 <tr dir-paginate="user in users|filter:search|itemsPerPage:10">
 <td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
 <td>{{user.fullname}}</td>
 <td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
 <td>{{user.district_name}}</td>
 <td>{{user.state_name}}</td>
 <td> <button type="button" class="btn btn-primary">View Details</button></td>
 </tr>
 </tbody>
 </table>
 //设置分页控件 <div id="paginate"> <dir-pagination-controls
 max-size="5"
 direction-links="true"
 boundary-links="true">
 </dir-pagination-controls></div> </div>

1 个答案:

答案 0 :(得分:0)

首先,您需要在项目中包含该模块:

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

然后创建分页内容:

<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]>
</dir-pagination-controls>

此处正在运作plunker