pagenav.js

a js plugin to render pagenav html. view at github download

demo

render it

basic use

html

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

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:'...'
        }
    }
    var result = pagenav(defs)
    console.log(result)

    //result will be like
    'page1, 51 in total[1][2][3][4]...[51][Next]'
    

    //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-desc {padding:0 .5em;}
    .pagenav-current {color:#8aa;padding:0 .3em;}
    .pagenav-total{padding: 0 .3em;color:green;}
    .pagenav-link {padding: 0 .5em;}
    .pagenav-current-link { font-weight: bold;}