CODEWITHSUNDEEP
angularjspagination
Dhawal Mhatre
Dhawal Mhatre

Reputation: 435

Angular JS Directive dirPagination

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:

enter image description here

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>

Upvotes: 1

Views: 501

Answers (1)

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

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

Upvotes: 1

Related Questions