Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Codesleuth/727d980f6678b0233875 to your computer and use it in GitHub Desktop.
Save Codesleuth/727d980f6678b0233875 to your computer and use it in GitHub Desktop.
Semantic UI Template for Paginate (Almost) Anything

Semantic UI Template for Paginate (Almost) Anything

Immortalised on my blog here: http://www.codesleuth.co.uk/2016/01/Semantic-UI-Template-for-Paginate-Almost-anything/

This is a template for Paginate (Almost) Anything using Semantic UI. The original dirPagination.tpl.html is written with bootstrap themes.

<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)">{{ 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>

To use this new template, drop it into your project and reference it using the template-url attribute:

<dir-pagination-controls template-url="path/to/dirPagination.tpl.html"></dir-pagination-controls>
<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)">{{ 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>
@johnrnelson
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment