angular-pagenav

a angular pagenav directive.

demo & doc

http://html5beta.com/apps/angular-pagenav.html

get

bower install angular-pagenav

use

reference it in html

<script src="angular-pagenav.min.js">

init

<div ng-controller="cl">
<span pagenav page="page" page-size="pageSize" total="total" options="opts"></span>
</div>

//main
angular.module('ctrl', [
    'zPagenav'
])
.controller('cl', function Cl() {
    this.page = 1
    this.pageSize = 20
    this.total = 500
    this.opts = {
        maxLinkShow:  5    //how many links to render max
        ,lang: {          // lang
                page: 'page'
                ,afterCurrentPage: ', '
                ,intotal: 'in total'
                ,Prev: 'Prev'
                ,Next: 'Next'
                ,more:'...'
        }
        ,url: opts.url || 'javascript:;' //page url
        ,pageParam: opts.pageParam || 'p' //page param name, '/?p=2'
        ,noFirstPageParam: opts.noFirstPageParam || false //when p=1, do not use it
        ,ngClick: true //ngclick event
    }
})

style it

.pagenav-desc {
  display: none;
}
 
.pagenav-total {
  padding: 6px 12px;
  color: #008000;
  display: inline-block;
}
 
.pagenav-link {
  padding: 6px 12px;
  display: inline-block;
  color: #999;
  border: 1px solid #ddd;
  background: #fff;
}
 
.pagenav-link:hover {
  background: #337ab7;
  color: #fff;
}
 
.pagenav-link:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
 
.pagenav-link:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
 
.pagenav-more {
  padding: 6px 12px;
  display: inline-block;
  color: #ddd;
  border: 1px solid #ddd;
  background: #fff;
}
 
.pagenav-current-link {
  color: #fff;
  padding: 6px 12px;
  display: inline-block;
  background: #337ab7;
  border: 1px solid #337ab7;
}
 
.only-one-page {
  display: none;
}

test

git clone https://github.com/zxdong262/angular-pagenav.git
cd angular-pagenav
npm install
bower install
gulp test