a angular pagenav directive
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
.gitignore
.travis.yml
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

angular-pagenav

Build Status

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