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:

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.

PerfectPixel · Accepted Answer · 2016-08-24 22:09:43Z

0

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.

answered Aug 24, 2016 at 22:09

PerfectPixel

1,9881 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

L1ghtk3ira Over a year ago

I have been comparing with the Plunker and do not quite see the difference

L1ghtk3ira Over a year ago

currentPage is only shown 1 from what I see in the top and 1 in the current page. And then it sets it to 1 in the controller

PerfectPixel Over a year ago

Well you need to use a variable for current-page as the directive needs to now the current page. If you hardcode it, it will always remain on this page. Replace it with current-page="controller.currentPage"

L1ghtk3ira Over a year ago

I do sorry I did not show that I will add it to my Controller

L1ghtk3ira Over a year ago

I am currently in the plunker deleting code to try to see what I am missing

|

L1ghtk3ira · Accepted Answer · 2016-08-25 15:06:55Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related