pagenav.js

a js function && nodejs module to render pagenav html. download

demo in browser

render it

demo in nodejs

git clone https://github.com/zxdong262/pagenavjs.git
cd pagenavjs
sudo npm install
node app

then visit http://localhost:4567

basic use

in browser

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

in node.js

npm install pagenavjs
                            

var 

//module
express = require('express')
,bodyParser = require('body-parser')
,_ = require('underscore')
,pagenavSetting = {
    itemPerPage: 10     //items to show per page
    ,maxLinkShow: 7   //how many links to render max
    ,itemTotal: 520      //how many items in total
    ,pageParam: 'p'
    ,noFirstPageParam: true
}
,pagenav = require('./pagenav')

//user setting
,port = 4567

// all environments
,app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
    extended: true
}))

// parse application/json
app.use(bodyParser.json())

// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }))

//static files
app.use(express.static(__dirname + '/test/res'))

//view engine
app.set('view engine', 'jade')
app.set('views', __dirname + '/test/views')

//routes
app.get('/', function(req, res) {
    var pageNo = parseInt(req.query.p, 10) || 1
    ,pageHtml = pagenav(_.extend(pagenavSetting, {
        page: pageNo
        ,url: '/'
    }))

    res.render('test', {
        pageHtml: pageHtml
    })

})

app.listen(port, function() {
    console.log('Magic happens on port ' + port)
})
                            

in your-js.js,

var defs = {
        itemPerPage: 10    //items to show per page 
        ,maxLinkShow: 5    //how many links to render max 
        ,itemTotal: 509      //how many items in total 
        ,page: 1           //the page number 
        ,lang: {           // lang, language ,optional
                'page': 'page'
                ,afterCurrentPage: ', '
                ,'intotal': 'in total'
                ,'Prev': 'Prev'
                ,'Next': 'Next'
                ,more:'...'
        }
        ,url: 'javascript:;' 
        ,pageParam: 'p'
        ,noFirstPageParam: false
}
var result = pagenav(defs)
console.log(result)

result html(formatted) will be like

<span class="pagenav-wrapper">
    <span class="pagenav-desc">
        page
        <span class="pagenav-current">
            1
        </span>
        <span class="pagenav-acp">
            ,
        </span>
        <span class="pagenav-total">
            52
        </span>
        in total
    </span>
    <span class="pagenav-units">
        <span data-page="1" class="page-1 pagenav-link pagenav-current-link">
            1
        </span>
        <a href="/?p=2" data-page="2" class="page-2 pagenav-link">
            2
        </a>
        <a href="/?p=3" data-page="3" class="page-3 pagenav-link">
            3
        </a>
        <a href="/?p=4" data-page="4" class="page-4 pagenav-link">
            4
        </a>
        <a href="/?p=5" data-page="5" class="page-5 pagenav-link">
            5
        </a>
        <a href="/?p=6" data-page="6" class="page-6 pagenav-link">
            6
        </a>
        <span class="pagenav-more">
            ...
        </span>
        <a href="/?p=52" data-page="52" class="page-52 pagenav-link">
            52
        </a>
        <a href="/?p=2" data-page="2" class="page-2 pagenav-link pagenav-link-next">
            Next
        </a>
    </span>
</span>

//then we can output the result, in zepto or jquery, it will be like
$('#output').html(result)

//click pagenav links, in zepto or jquery
$('#output').on('click', 'a.pagenav-link', function() {
        var t = $(this)
        ,pageNumber = parseInt(t.data('page'), 10)
        defs.page = pageNumber
        $('#output').html(pagenav(defs))
})
                            

style

you can style it by css, example css:

/* pagenav */
.pagenav-current {
    color: #00a0e8;
    padding: 0.3em 0.6em;
    display: inline-block;
    margin: 3px 2px;
}
.pagenav-total {
    padding: 0 .3em;
    color: green;
    display: inline-block;
}
.pagenav-link {
    padding: 0.3em 0.6em;
    display: inline-block;
    color: #999;
    margin: 3px 2px;
    border: 1px solid #ddd;
    background: #fff;
}
.pagenav-current-link {
    font-weight: bold;
    border: none;
    color: #00a0e8;
}
.pagenav-link:hover {
    background: #00a0e8;
    color: #fff;
}
.pagenav-current-link:hover {
    background: #fff;
    color: #00a0e8;
}
.only-one-page {
    display: none;
}
.pagenav-desc {
    margin-right: 10px;
}