dirPaginate not working with ng-repeat-start(for expandable table)

Question

I am using a expendable table for that the code is below

<table class="table table-condensed table-bordered">
    <thead>
        <tr>
            <th>
            </th>
            <th>S. No.</th>
            <th>Position</th>
            <th>Reporting to</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
            <td>
                <button ng-click="expanded = !expanded">
                    <span ng-bind="expanded ? '-' : '+'"></span>
                </button>
            </td>
            <td >{{$index+1}}</td>
            <td>{{position.positionName}}</td>
            <td>{{position.reportingToName}}</td>
        </tr>
        <tr ng-show="expanded">
            <td></td>
            <td colspan="3">
                <div class="col-lg-6 margin_all">
                    <span>Department Code: {{position.depCode}}</span>
                </div>
                <div class="col-lg-6 margin_all">
                    <span>Department Name: {{position.depName}}</span>
                </div>
                <div class="col-lg-6 margin_all">
                    <span>Position Name: {{position.positionName}}</span>
                </div>
                <div class="col-lg-6 margin_all">
                    <span>Is He HOD: 
                        <label>
                            <input type="checkbox" ng-model="position.isHeadofdepartment">
                            <span class="text"></span>
                        </label>
                    </span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Here I am using ng-repeat-start directive for expandable table. but pagination showing this alert:

Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.

and an error:

pagination directive: the itemsPerPage id argument (id: __default) does not match a registered pagination-id.

Help me I need pagination in expandable table.

Answer 1

You have 2 errors, i think.

• dirPaginate require use dir-paginate instead of ng-repeat .
• You need use pagination control directive .

To solve you problem do next:

• Change ng-repeat on dir-paginate in ng-repeat="position in listPositiondtls | itemsPerPage:10"
• Add in html <dir-pagination-controls></dir-pagination-controls>

Modified html

<dir-pagination-controls></dir-pagination-controls> 
<table class="table table-condensed table-bordered">
<thead>
    <tr>
        <th>
        </th>
        <th>S. No.</th>
        <th>Position</th>
        <th>Reporting to</th>
    </tr>
</thead>
<tbody>
    <tr dir-paginate="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
        <td>
            <button ng-click="expanded = !expanded">
                <span ng-bind="expanded ? '-' : '+'"></span>
            </button>
        </td>
        <td >{{$index+1}}</td>
        <td>{{position.positionName}}</td>
        <td>{{position.reportingToName}}</td>
    </tr>
    <tr ng-show="expanded">
        <td></td>
        <td colspan="3">
            <div class="col-lg-6 margin_all">
                <span>Department Code: {{position.depCode}}</span>
            </div>
            <div class="col-lg-6 margin_all">
                <span>Department Name: {{position.depName}}</span>
            </div>
            <div class="col-lg-6 margin_all">
                <span>Position Name: {{position.positionName}}</span>
            </div>
            <div class="col-lg-6 margin_all">
                <span>Is He HOD: 
                    <label>
                        <input type="checkbox" ng-model="position.isHeadofdepartment">
                        <span class="text"></span>
                    </label>
                </span>
            </div>
        </td>
    </tr>
</tbody>