Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

zpager

Build Status

a nodejs module render pagination html

install

npm install zpager --save

use

const Pager = require('zpager')
let pager = new Pager()
var html = pager.render({
  page: 1
  ,pageSize: 10
  ,total: 503
  ,maxLink: 5
  ,url: 'http://io.js'
})

/* 
//html =

<nav class="zpagenav" >
          <span class="pagination page-link m-r-1">total:100</span> 
          <ul class="pagination"><li class="page-item disabled">
                <span class="page-link" href="http://io.js?p=1" aria-label="Previous"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></span>
              </li><li class="page-item active">
                <a class="page-link" href="http://io.js?p=1" aria-label="1"><span>1</span></a>
              </li><li class="page-item ">
                <a class="page-link" href="http://io.js?p=2" aria-label="2"><span>2</span></a>
              </li><li class="page-item ">
                <a class="page-link" href="http://io.js?p=3" aria-label="3"><span>3</span></a>
              </li><li class="page-item ">
                <a class="page-link" href="http://io.js?p=4" aria-label="4"><span>4</span></a>
              </li><li class="page-item disabled">
                <span class="page-link" href="http://io.js?p=1" aria-label="..."><span>...</span></span>
              </li><li class="page-item ">
                <a class="page-link" href="http://io.js?p=10" aria-label="10"><span>10</span></a>
              </li><li class="page-item ">
                <a class="page-link" href="http://io.js?p=2" aria-label="Next"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a>
              </li></ul>
        </nav>

*/

customize

  /**
   * constructor with option
   *
   * @param pageSize {Number} default pagesize
   * @param total {Number} default total items number
   * @param pageSize {Number} default pagesize
   * @param prevHtml {String} prev button html
   * @param nextHtml {String} next button html
   * @param prevSrHtml {String} prev button html for screen reader
   * @param nextSrHtml {String} next button html for screen reader
   * @param dotsHtml {String} seprator button html
   * @param template {Function} template function, return the output html
   */

let option = {
      pageSize: 10
      ,total: 0
      ,prevHtml: '«'
      ,nextHtml: '»'
      ,prevSrHtml: 'Previous'
      ,nextSrHtml: 'Next'
      ,dotsHtml: '...'
      ,template: function(data) {
        return `<nav class="zpagenav" >
          <span class="pagination page-link m-r-1">total:${data.total}</span> 
          <ul class="pagination">` +

            data.units.map(function(unit, index) {
              return `<li class="page-item ${unit.class}">
                <` + (unit.isDisabled?'span':'a') + ` class="page-link" href="http://io.js?p=${unit.page}" aria-label="${unit.ariaLabel}">` +
                  (unit.isPager?`<span aria-hidden="true">${unit.html}</span>`:
                                `<span>${unit.html}</span>`) +
                  (unit.isPager?`<span class="sr-only">${unit.srHtml}</span>`:'') +
                `</` + (unit.isDisabled?'span':'a') + `>
              </li>`
            }).join('') +

          `</ul>
        </nav>`
      }
}

const Pager = require('pager')
let pager = new Pager(option)
var html = pager.render({
  page: 1
  ,pageSize: 10
  ,total: 503
  ,maxLink: 5
  ,url: 'http://io.js'
})

style it, for default template, just the same css from bootstrap4 pagination module

.m-r-1 {
    margin-right: 1rem!important;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
}

.page-item {
  display: inline;
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}

.page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #0275d8;
  border-color: #0275d8;
}

.page-item.disabled .page-link, .page-item.disabled .page-link:focus, .page-item.disabled .page-link:hover {
  color: #818a91;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}

.page-link {
  position: relative;
  float: left;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.5;
  color: #0275d8;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}

.page-link:focus, .page-link:hover {
  color: #014c8c;
  background-color: #eceeef;
  border-color: #ddd;
}

.pagination-lg .page-link {
  padding: .75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.333333;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: .3rem;
  border-bottom-left-radius: .3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: .3rem;
  border-bottom-right-radius: .3rem;
}

.pagination-sm .page-link {
  padding: .275rem .75rem;
  font-size: .875rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: .2rem;
  border-bottom-left-radius: .2rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: .2rem;
  border-bottom-right-radius: .2rem;
}

.pager {
  padding-left: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  list-style: none;
}

.pager::after {
  display: table;
  clear: both;
  content: "";
}

.pager li {
  display: inline;
}

.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}

.pager li > a:focus, .pager li > a:hover {
  text-decoration: none;
  background-color: #eceeef;
}

.pager .disabled > a, .pager .disabled > a:focus, .pager .disabled > a:hover {
  color: #818a91;
  cursor: not-allowed;
  background-color: #fff;
}

.pager .disabled > span {
  color: #818a91;
  cursor: not-allowed;
  background-color: #fff;
}

.pager-next > a,
.pager-next > span {
  float: right;
}

.pager-prev > a,
.pager-prev > span {
  float: left;
}

test

git clone https://github.com/zxdong262/pager.git
cd pager
npm install
npm i mocha -g
mocha

License

MIT

About

a nodejs module render pagenavigation html

Resources

License

You can’t perform that action at this time.