目录分页控件未显示

Question

我有这个：

        <div class="row services">
                <div class="col-md-3 col-sm-6" dir-paginate="item in listings | itemsPerPage: 4">
                  <center>
                    <a href="{{ item.steamname }}"><h4>{{ item.profilename }}</h4></a>
                    <img src="{{item.rank }}" />
          <p>{{ item.location }}</p>
        </center>
                </div>
            </div>
        </div>
                    <center><dir-pagination-controls></dir-pagination-controls></center>

由于某种原因，控件根本没有显示。

甚至不知道从哪里开始。实际的分页是按照要求将列表减少到4，但其余的没有显示......

Answer 1

你应该

把total-items="10"放在dir-paginate="item in listings | itemsPerPage: 4"之后

整个代码看起来像这样，

<div class="row services">
    <div class="col-md-3 col-sm-6" dir-paginate="item in listings | itemsPerPage: 4" total-items="10">
        <center>
            <a href="{{ item.steamname }}"><h4>{{ item.profilename }}</h4></a>
            <img src="{{item.rank }}" />
            <p>{{ item.location }}</p>
        </center>
    </div>
</div>
<center><dir-pagination-controls></dir-pagination-controls></center>

并确保total-items应大于itemsPerPage

Answer 2

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

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

3. 之后添加目录分页指令以在脚本中进行分页文件代码给出如下：

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

4. 然后在div 标签中添加给定的代码行：

 <div  dir-paginate="item in listings|itemsPerPage:4">

5. 然后在HTML页面中添加分页控件，用于放置"第一个"，"下一个"，"上一个"和"最后一个"按钮。代码如下：

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