2.0.0 • Published 9 years ago

jp-angular-paging v2.0.0

Weekly downloads
3
License
MIT
Repository
github
Last release
9 years ago

#Angular Paging npm version bower version Build Status CDN

##Background I have often found myself paging across millions of log rows or massive non-normalized lists even after some level of filtering by date range or on some column value. These scenarios have pushed me to develop a reusable paging scheme which just happens to drop nicely into AngularJS.

##Installation and Contribution The core of this project is a simple angular directive which allows you to use the code in many different ways. If you are interested in keeping current with bug fixes and features, we support both bower and npm install commands. If you just want to grab the latest or work with CDN's, head over to the distribution folder for the latest code base. Finally, if you are interested in contributing or see any issues feel free to fork and test away!

##Code Samples alt text

<!-- Simple Example -->
<div paging
  page="35" 
  page-size="10" 
  total="1000"
  paging-action="foo('bar', page)">
</div> 

alt text

<!-- Advanced Example -->
<paging
  class="small"
  page="currentPage" 
  page-size="pageSize" 
  total="total"
  adjacent="{{adjacent}}"
  dots="{{dots}}"
  scroll-top="{{scrollTop}}" 
  hide-if-empty="{{hideIfEmpty}}"
  ul-class="{{ulClass}}"
  active-class="{{activeClass}}"
  disabled-class="{{disabledClass}}"
  show-prev-next="{{showPrevNext}}"
  paging-action="DoCtrlPagingAct('Paging Clicked', page, pageSize, total)">
</paging>   

See src/index.html for complete code samples and documentation

##Programmatic Goals I wanted to create an angular directive I could easily reuse and tie back into a controller. Programmatically I wanted to limit the "paging" information a developer would have to pass into the directive. There are some optional directive attributes for handling CSS classes and hiding previous and next arrows. The following three attributes are required directive inputs:

  1. page What page am I currently viewing
  2. pageSize How many items in the list to display on a page
  3. total What is the total count of items in my list

##Visual Goals I set out to develop a paging display which would allow the user to quickly move to the next or previous page while still allowing them to move to the first or last page instantly. Visually I selected the common pattern 1 2 ... 7 8 9 ... 100 101 where the count inside the dot ellipsis changes as the pages increase or decrease.

See Full Demo for complete samples and documentation