dir-paginate controls not showing

Question

I've got this:

        <div class="row services">
                <div class="col-md-3 col-sm-6" dir-paginate="item in listings | itemsPerPage: 4">
                  <center>
                    <a href="{{ item.steamname }}"><h4>{{ item.profilename }}</h4></a>
                    <img src="{{item.rank }}" />
          <p>{{ item.location }}</p>
        </center>
                </div>
            </div>

        </div>
                    <center><dir-pagination-controls></dir-pagination-controls></center>

For some reason the controls are not showing at all..

Not even sure where to start. The actual pagination is cutting down the listings to 4 as requested but the rest doesn't show...

Did you find the cause or the solution to it? I have been using this for so many projects but suddenly for my current project I'm facing a similar issue as you are. — rahil471, Sep 19 '16 at 12:37

score 2 · Answer 1 · answered Jul 25 '17 at 07:48

You should put total-items="10" after the dir-paginate="item in listings | itemsPerPage: 4"

the whole code looks like this,

<div class="row services">
    <div class="col-md-3 col-sm-6" dir-paginate="item in listings | itemsPerPage: 4" total-items="10">
        <center>
            <a href="{{ item.steamname }}"><h4>{{ item.profilename }}</h4></a>
            <img src="{{item.rank }}" />
            <p>{{ item.location }}</p>
        </center>
    </div>
</div>

<center><dir-pagination-controls></dir-pagination-controls></center>

And also make sure total-items should be greater than itemsPerPage

`And also make sure total-items should be greater than itemsPerPage` saved time — Kishor Pawar, Oct 05 '17 at 09:58

score 1 · Answer 2 · answered Dec 21 '15 at 09:21

Firstly download the dirPagination.js from here.
Include the dirPagination.js file on your page like :

<script src="~/Content/dirPagination.js"></script>

After that add dir-paginate directive for pagination in script file.code given below :

angular.module('myApp', ['angularUtils.directives.dirPagination']);

Then in div tag add given line of code :

 <div  dir-paginate="item in listings|itemsPerPage:4">

Then add pagination control in your HTML page for putting buttons of First,Next,Previous and Last.Code given below :

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

dir-paginate controls not showing

2 Answers2