使用两个目录分页控件进行目录分页

Question

目前我有一个事件列表，列表底部有一个分页。这很有效，但现在我想在列表的末尾添加一个附加的分页。当我现在更改底部的分页时，顶部的分页不会更新。

我的工作代码是：

<tbody>
        <tr dir-paginate="event in events | orderBy:['id', 't']:true | itemsPerPage: dirPaginate.pageSize" current-page="dirPaginate.currentPage">
            <td><i class="{{ ::(event.el | eventtype).icon }}" tooltip="{{ ::(event.el | eventtype).tooltip }}"></i></td>
            <td class="hidden-xs">{{::event.nr}}</td>
            <td><span ng-bind-html="::('' + event.tg | eventMessage:event.d:'html')"></span>
                <span class="visible-xs"> ({{::event.nr}})</span>
            </td>
            <td>{{ ::(event.t * 1000 | date:'mediumDate')}} <span class="visible-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</span></td>
            <td class="hidden-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" class="paginationContainer"><dir-pagination-controls></dir-pagination-controls></td>
            </tr>
        </tfoot>

当其中一个分页发生更改时，如何更新两个分页？

Answer 1

1. 从这里下载dirPagination.js

2. 现在将dirPagination.js包含到您的页面中。

3. 添加angularUtils.directives.dir在您的模块中分页，如

var app=angular.module（"myApp"，[angularUtils.directions.dirPagination']）；

4.we use dir-paginate directive for pagination  add dir-paginate in tr tag

<tr dir-paginate="event in events|orderBy:['id', 't']:true |
     itemsPerPage: dirPaginate.pageSize">

5.Add below given code on upper and lower side of your grid .it will automatically update page no. in both pagination controls. 

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