dirPagination Not Showing

[DevQueen]

I am trying to use dirPagination in a table in an ng-repeat. My problem is that I cannot get the control to show. I just got the code today, so I assume that it is the "latest" version.

Here is my app.config block where I specify the template location:

app.config([
  '$compileProvider', '$httpProvider', 'paginationTemplateProvider',
  function ($compileProvider, $httpProvider, paginationTemplateProvider) {
      $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|javascript):/);

    paginationTemplateProvider.setPath('/Scripts/dirPagination.tpl.html');
    // Initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
      $httpProvider.defaults.headers.get = {};
    }

    // Enables Request.IsAjaxRequest() in ASP.NET MVC
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

    // Disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
  }
]);

I have included it in my app like so:

var app = angular .module('myModule', [ 'ui.bootstrap', 'checklist-model', 'ssq.shared', 'ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.autoResize', 'ui.grid.saveState', 'ui.router', 'cgBusy', 'ui.mask', 'ngFileUpload', 'ngSanitize', 'angularUtils.directives.dirPagination' ]);

Here is where I am trying to use it in my ng-repeat:

<div ng-repeat="type in documentsToFilter() | filter:filterDocuments" ng-cloak>
                                <div style="width:100%; padding-bottom: 5px; border:solid 1px; background-color:#e8e9ea"><i style="cursor:pointer" class="glyphicon" ng-class="{'glyphicon-plus': isCollapsed, 'glyphicon-minus': !isCollapsed}" ng-click="isCollapsed = !isCollapsed"></i><span style="padding-left:5px" ng-bind="type.vchDescription"></span></div>
                                <div collapse="isCollapsed" style="padding-left:10px; padding-top:10px; padding-bottom:10px" ng-cloak>
                                    <table style="width: 100%" ng-cloak>
                                        <tbody>
                                        <tr style="background-color: #cfe7f1; text-align: center" ng-cloak>
                                            <td>Description</td>
                                            <td>Document Link</td>
                                            <td>File Type/Size</td>
                                            <td>Upload Date</td>
                                            <td>Uploaded By</td>
                                        </tr>
                                        <tr style="text-align: center" ng-repeat="d in documents | filter:{EdataFileImageTypeID: type.EdataFileImageTypeID} : true" ng-cloak>
                                            <td style="width: 40%" ng-bind="d.vchReferenceDescription"></td>
                                            <td style="width: 10%" ng-if="d.FileType!='BMP' && d.FileType!='TIF' && d.FileType!='GIF' && d.FileType!='JPG' && d.FileType!='PNG'"><button type="button" class="btn btn-link" ng-click="getContractorDocument(d)">Open</button></td>
                                            <td ng-if="d.FileType=='BMP' || d.FileType=='TIF' || d.FileType =='GIF' || d.FileType=='JPG' || d.FileType=='PNG'" style="width: 10%"><button type="button" class="btn btn-link" data-toggle="modal" data-target="#imageViewer" ng-click="getContractorDocument(d)">Open</button></td>
                                            <td style="width: 10%" ng-bind="(d.FileType)+'/'+(d.FileSize)"></td>
                                            <td style="width: 15%" ng-bind="d.dteUploaded"></td>
                                            <td style="width: 15%" ng-bind="d.vchUploadedbyUserName"></td>
                                        </tr>
                                        </tbody>
                                        <tfoot>
                                        <tr>
                                            <td>
                                                <div dir-paginate="item in type.EdataFileImageTypeID" pagination-id="type.EdataFileImageTypeID"></div>

                                            </td>
                                        </tr>
                                        <tr>
                                            <td><dir-pagination-controls pagination-id="type.EdataFileImageTypeID"></dir-pagination-controls></td>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

I cannot get the control to display at all.

[lucas-barros]

I think you have to include itemsPerPage filter.

itemsPerPage: The expression must include this filter. It is required by the pagination logic. The syntax is the same as any filter: itemsPerPage: 10

Example

<div dir-paginate="item in type.EdataFileImageTypeID | itemsPerPage: 10" pagination-id="type.EdataFileImageTypeID"></div>