pagenav.js
a js function && nodejs module to render pagenav html. download
demo in browser
* maxLinkShow: how many links to render max
* itemPerPage: 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
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; }