Angular JS Directive dirPagination

Question

I have created a Grid View (Table List) using Angular JS and added dirPagination, its working perfectly fine, also i have added UI Bootstrap Modal Popup in same page and in pop up there is another pagination.

My Issue is that when modal pop-up pagination is activated and main page pagination is also replaced by modal pop-up pagination.

Below is screenshot:

Below is my Code: Main Page:

<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
    <table class="table table-bordered" >
            <thead>
                <tr>
                    <th at-implicit at-sortable at-attribute="country" at-initial-sorting="asc">Country</th>
                    <th at-implicit at-sortable at-attribute="type">Type</th>
                    <th at-implicit at-sortable at-attribute="plan">Plan Type</th>
                    <th at-implicit at-sortable at-attribute="code">Rate Code</th>
                    <th at-implicit at-sortable at-attribute="rate_plan">Rate Plan</th>

                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="plan in plan_list|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                    <td>{{plan.COUNTRY_NAME}}</td>
                    <td>Reservation Less</td>
                    <td>PostPaid</td>
                    <td>{{plan.RATEPLAN_CODE}}</td>
                    <td><a href="" ng-click="open(plan.RATEPLAN_CODE)">{{plan.RATEPLAN_DETAILS}}</a></td>
                </tr>

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

PopUp Page:

   <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
    <table class="table table-bordered" >
            <thead>
                <tr>
                    <th at-implicit at-sortable at-attribute="country" at-initial-sorting="asc">Country</th>
                    <th at-implicit at-sortable at-attribute="rate">Rate</th>
                    <th at-implicit at-sortable at-attribute="call_type">Call Type</th>

                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="rate in rate_list|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                    <td>{{rate.TO_COUNTRY}}</td>
                    <td>{{rate.TARIFF}}</td>
                    <td>{{rate.CALL_TYPE}}</td>
                </tr>

            </tbody>
        </table>

Gaurav Srivastava · Accepted Answer · 2017-08-08 07:00:23Z

1

You can use multiple pagination like this, You have to use different pagination-id for each pagination control:

<!-- first pagination instance -->
<ul>
    <li dir-paginate="customer in customers | itemsPerPage: 10" pagination-id="cust">{{ customer.name }}</li>
</ul>

<dir-pagination-controls pagination-id="cust"></dir-pagination-controls>

<!-- second pagination instance -->
<ul>
    <li dir-paginate="branch in branches | itemsPerPage: 10" pagination-id="branch">{{ customer.name }}</li>
</ul>

<dir-pagination-controls pagination-id="branch"></dir-pagination-controls>

Here is the doc link

answered Aug 8, 2017 at 7:00

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dhawal Mhatre Over a year ago

I was trying same thing but didn't add the id to controls... my bad.. thanks

Collectives™ on Stack Overflow

Angular JS Directive dirPagination

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related