CODEWITHSUNDEEP
angularjsdirpagination
Christian Pippert
Christian Pippert

Reputation: 51

dir-paginate with two dir-pagination-control

at the moment I have list of events with a pagination on the bottom of the list. That works well, but now I want to add a addintional pagination on the to of the list. When I now change the pagination on the bottom the pagination on the top is not updated.

My working code is: 

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

How can I uptate both paginations when one of them is changed?

Upvotes: 1

Views: 4191

Answers (1)

Sahil Saini
Sahil Saini

Reputation: 250

  1. Download dirPagination.js from here. .

  2. Now include dirPagination.js to your page.

  3. Add angularUtils.directives.dirPagination in your module like this

var app = angular.module("myApp", ['angularUtils.directives.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>

Upvotes: 1

Related Questions