David Wood's avatar

Semantic UI Template for Paginate (Almost) Anything

dirPaginate with Semantic UI in plunker

If you’ve tried using Michael Bromley’s AngularJS Pagination Directive in a Semantic UI site, you’ll probably notice that the pagination control renders like a regular unordered list.

dirPaginate broken in Semantic UI

Pagination Directive

The directive is part of a collection of utils available on GitHub and can be installed from bower or npm, whichever suits your project best.

$ bower install angular-utils-pagination
$ npm install angular-utils-pagination

The directive replaces the use of ng-repeat for the page content, and includes a new directive to represent a set of page navigation buttons. The control is designed for use in Bootstrap, which will be fine for the common case, but can be modified to use a custom template making it very flexible - nice work Michael!

New Template

I’m a big fan of Semantic UI, and love how simple it is to style my AngularJS sites. Once I noticed the styles were broken, I started digging. The solution is quick and simple, and involves creating a custom template for the page navigation directive to use Semantic UI. I’ve based this off the pagination example in the tables documentation.

Copy this template and save it in your project next to your other templates/views/partials as dirPagination.tpl.html.

<div class="ui pagination menu" ng-if="1 < pages.length || !autoHide">
  <a class="icon item" ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }" 
     href="" ng-click="setCurrent(1)">
    <i class="angle double left icon"></i>
  </a>
  <a class="icon item" ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }" 
     href="" ng-click="setCurrent(pagination.current - 1)">
    <i class="left chevron icon"></i>
  </a>

  <a class="item" ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" 
     ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }" 
     href="" ng-click="setCurrent(pageNumber)"></a>

  <a class="icon item" ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }" 
     href="" ng-click="setCurrent(pagination.current + 1)">
    <i class="right chevron icon"></i>
  </a>
  <a class="icon item" ng-if="boundaryLinks"  ng-class="{ disabled : pagination.current == pagination.last }" 
     href="" ng-click="setCurrent(pagination.last)">
    <i class=" angle double right icon"></i>
  </a>
</div>

Reference the Template

To use the template, reference it in the pagination control directive as follows.

<dir-pagination-controls template-url="path/to/dirPagination.tpl.html"></dir-pagination-controls>

Once you’re done, your pagination controls should look like this, and function in exactly the same way as the vanilla Bootstrap version. If there are updates to the directive, you may have to fix some things, but I’ll try keep this up to date if anything does change.

dirPaginate Semantic UI Pagination Controls

Demo Site

The original repository includes a demo of the directive on Plunker which I’ve forked and updated with this template. Take a look at the demo to see it in action!

Enjoy!