Angular JS: Pagination using the Pagination Directive JS without using the Pagination.tpl.html Template

Question

I am new to pagination and I found this directive which is highly sought after for Angular JS from what I have read. I am trying to implement the pagination to work with a my custom pagination html/css layout I have created.

The pagination slightly works as the number of pages show up correctly and the number of items being shown is correct as I specified. The problem however is clicking for example page 2 in the pagination list does not load the next list of 5 items. It simply stays on the same list.

I am a bit confused how to use all the parts properly of this directive so I believe I am doing something wrong with implementing this directive.

The guides I am following is found here which is the same as the repository above.

Downloaded files and added to project:

dirPagination.js

My HTML is as follows:

<div id="pages" ng-if="1 < pages.length || !autoHide">
  <span ng-class="{ active : pagination.current == pageNumber,
      disabled : pageNumber == '...' }" class="pagenumber" 
      dir-paginate="pageID in controller.list| filter:q | itemsPerPage:
      controller.pageCount" current-page="controller.currentPage">
    <a href="" ng-click="setCurrent(pageID)">{{ pageID.id }}</a>
  </span>
</div>

<div class="myResults" dir-paginate="results 
  in controller.list| filter:q | itemsPerPage: 5" current-page="1">
    <div class="listFigures">
        <figure class="imageList">
            <img ng-src="{{results.image}}" ng-alt=
              {{results.imageAlt}}" ng-title=
              {{results.imageTitle}}" />
        </figure>
    </div>
</div>

In my controller I have pageCount set based on how many items (it is used as a parameter and works for showing how many pages for now):

vm.pageCount=2;
vm.currentPage = 1;

Working:

• The list of pages is showing, following the code above you will see that it is at 8 pages.
• Only 5 items are displaying as indicated

Not working:

• Clicking on another page (in this case 2) does not bring me to another page of data. The list does not get refreshed. Clicking on another page number keeps the same list of 5 items displaying. There are a total of 8 items, with 5 being displayed clicking on the 2nd page number should show the last 3.

Posts researched:

• dirPagination does not work (Angular JS pagination)

• Pagination with AngularJS?

• dir-pagination directive angularjs : is there any way I can get all the records of current page in pagination?

I am confused about how to get this working as well if my implementation is completely off. I have read a few posts as well as try do follow the guide in the repository however I am not understanding how to use it correctly. I am interested in finding out how to implement this pagination directive with custom html/css and not using the dirPagination.tpl.html template.

Following best practices you can read here for standard Angular.

Answer 1

You hardcoded your current page in the directive at the end:

<div class="myResults" dir-paginate="results in controller.list| filter:q | itemsPerPage: 5" current-page="1">

To get it working you need to set it to the variable that holds your current page. You can compare your code to the plunker provided by Pagination Directive http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview at line 42.

Answer 2

After picking apart the code on Plunker found here as well as the template that comes with the download of the directive dirPagination.tpl.html I found out how to successfully utilize is without using the template. You cannot skip anything. Must use lists must use most of the tags provided by the template that are being used with dirPagination.js.

Here is the working solution. Only thing that required changing was in the html:

<div class="results">
  <dir-pagination-controls  on-page-change="pageChangeHandler(newPageNumber)">
  </dir-pagination-controls>

  <div class="pages" ng-if="1 < pages.length || !autoHide"
      class="pagenumber pagination" dir-paginate="pageID in
      controller.list| filter:q | itemsPerPage:5"
      ng-class="{ active : pagination.current == pageNumber, disabled :
      pageNumber == '...' }">
    <ul class="pagination" ng-if="1 < pages.length || !autoHide">
      <li ng-repeat="pageNumber in pages track by tracker(pageNumber,
          $index)" ng-class="{ active : pagination.current == 
          pageNumber, disabled : pageNumber == '...' }">
        <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }} 
        </a>
      </li>
    </ul>
  </div>
</div>

Feel free to copy past all that html in your document and use classes I made:

• results
• pages
• pagination

To change the CSS however you like.

Note: Pagination class cannot be removed, even if you take it out of your html if you check you elements when you run the page on the browser you will see that it is placed back in automatically.

Temporary Note: When I figure out how to show the Number of pages in an above tag such as h1 I will add that to my answer.