angular-pagenav


description

a angular pagenav directive.

@github

download

download from github

simple demo

* maxLinkShow: how many links to render max

* pageSize: items to show per page

* itemTotal: how many items in total

* page: the page number

url: page url, default is 'javascript:;'

pageParam: page param name, default is 'p'

noFirstPageParam: for the first page, use p=1 or not, default is false

ngClick: registe ngClick event or not, default is true

current page = {{page}}

test

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

how to use

reference it in html

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

load proper css in your css file, example will be like this:

.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;
}

init

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

in js

//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:  'javascript:;' //page url
        ,pageParam:  'p' //page param name, '/?p=2'
        ,noFirstPageParam: false //when p=1, do not use it
        ,ngClick: true //reg ngclick event or not
    }
})