CODEWITHSUNDEEP
jqueryangularjs
Karan
Karan

Reputation: 1118

Pagination directive multiple time on same page

I am creating a web app using angular. I have created a grid using angular js. I want to use pagination directive two times on similar page. But problem is both run when I click on first.

Here is my code:

  <div dir-paginate="partners in partnersData|orderBy:orderByField:reverseSort |filter:{name: partners.name, website: partners.website, location: partners.location}|itemsPerPage: limits as filteredArray" current-page="currentPage">
          <div class="rowDiv">
            <div class="cellDiv"><span   ng-click="makeFavourite(partners)" class="star_rating hide" ng-class="{'select':partners.select}"></span> <span ng-click="showImage($index)"></span></div>
            <div class="cellDiv" ng-click="showName($index)">{{partners.name}}</div>
            <div class="cellDiv" ng-click="openWebsite(partners.website)">{{partners.website}}</div>
            <div class="cellDiv">{{partners.location}}</div>
            <div class="cellDiv">{{partners.service}}</div>
            <div class="cellDiv">{{partners.connection}}</div>
            <div class="cellDiv">{{partners.action}}</div>
            <div class="cellDiv lastCell"><span class="icon_pluse" ng-click="openPlus($index)"></span><span class="icon_info" ng-click="openInfo($index)"></span></div>
          </div>
<dir-pagination-controls boundary-links="true"  template-url="templates/dashboard/dirPagination.tpl.html"></dir-pagination-controls>


<tr dir-paginate="informationData in information| itemsPerPage: pageSize" current-page="currentPage">
                  <td>{{informationData.status}}</td>
                  <td>{{informationData.endpoint}}</td>
                  <td>{{informationData.partnerEndPoint}}</td>
                  <td>{{informationData.location}}</td>
                  <td>{{informationData.bandwidth}}</td>
                  <td>{{informationData.initiated}}</td>
                  <td>{{informationData.provisioned}}</td>
                  <td>{{informationData.Deleted}}</td>
                </tr>

Upvotes: 0

Views: 1427

Answers (1)

Karan
Karan

Reputation: 1118

Pagination Directive is here: https://github.com/michaelbromley/angularUtils/issues/128

For assigning pagination multiple time you must have to give pagination id:

<tr dir-paginate="informationData in information| itemsPerPage: pageSize" pagination-id="abc"current-page="currentPage">
<dir-pagination-controls boundary-links="true"  template-url="templates/dashboard/dirPagination.tpl.html" pagination-id="abc"></dir-pagination-controls>

Upvotes: 1

Related Questions