好用的分页器（原生）

html:

<div id="test" style="height:70px;padding:30px 10px;font-size: 300%;"></div>

<div id="pageNav"></div>

js:

<script type="text/javascript" src="pagenav1.1.cn.js"></script>

<script type="text/javascript">


//$(function(){ //for jquery
window.onload = (function(){


//optional set
pageNav.pre="上一页";
pageNav.next="下一页";



//  p,当前页码,pn,总页面(1处)
pageNav.fn = function(p,pn){
document.getElementById("test").innerHTML ="当前页:"+p+"  ,  总页: "+pn;
//$("#test").text("Page:"+p+" of "+pn + " pages."); // jquery调用方式
};

//重写分页状态,跳到第三页,总页33页(2处)
pageNav.go(3,33);

//注意，1处和2处的代码若颠倒先后书写顺序，结果会不一样，可自行测试


});


  </script>

css:

<style type="text/css" media="screen">
    a {
        color: #2B4A78;
        text-decoration: none;
    }


    a:hover {
        color: #2B4A78;
        text-decoration: underline;
    }


    a:focus, input:focus {
        outline-style: none;
        outline-width: medium;
    }


    /* custom css style: pageNum,cPageNum */
    .pageNum {
        border: 1px solid #999;
        padding: 2px 8px;
        display: inline-block;
    }


    .cPageNum {
        font-weight: bold;
        padding: 2px 5px;
    }
    #pageNav{
        -moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
    }
    #pageNav a:hover {
        text-decoration: none;
        background: #fff4d8;
    }


</style>

plugin pagenav1.1.cn.js code show:

/*
 **************************
 author:Keel (keel.sike@gmail.com)
 **************************


 页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码.
 调用时可根据需要先重写go方法.(已去除jquery依赖)


 **************************
 示例(注意：页面中放置id为pageNav的html对象):


 //转到页码时触发的自定义方法,p为当前页码,pn为总页数
 pageNav.fn = function(p,pn){
 alert(p+","+pn);
 };
 //初始跳到第3页,共33页
 pageNav.go(3,33);


 */
var pageNav = pageNav || {};
pageNav.fn = null;
//p为当前页码,pn为总页数
pageNav.nav = function(p, pn) {
    //只有一页,直接显示1
    if (pn <= 1) {
        this.p = 1;
        this.pn = 1;
        return this.pHtml2(1);
    }
    if (pn < p) {
        p = pn;
    };
    var re = "";
    //第一页
    if (p <= 1) {
        p = 1;
    } else {
        //非第一页
        re += this.pHtml(p - 1, pn, "上一页");
        //总是显示第一页页码
        re += this.pHtml(1, pn, "1");
    }
    //校正页码
    this.p = p;
    this.pn = pn;


    //开始页码
    var start = 2;
    var end = (pn < 9) ? pn: 9;
    //是否显示前置省略号,即大于10的开始页码
    if (p >= 7) {
        re += "...";
        start = p - 4;
        var e = p + 4;
        end = (pn < e) ? pn: e;
    }
    for (var i = start; i < p; i++) {
        re += this.pHtml(i, pn);
    };
    re += this.pHtml2(p);
    for (var i = p + 1; i <= end; i++) {
        re += this.pHtml(i, pn);
    };
    if (end < pn) {
        re += "...";
        //显示最后一页页码,如不需要则去掉下面这一句
        re += this.pHtml(pn, pn);
    };
    if (p < pn) {
        re += this.pHtml(p + 1, pn, "下一页");
    };
    return re;
};
//显示非当前页
pageNav.pHtml = function(pageNo, pn, showPageNo) {
    showPageNo = showPageNo || pageNo;
    var H = " <a href='javascript:pageNav.go(" + pageNo + "," + pn + ");' class='pageNum'>" + showPageNo + "</a> ";
    return H;


};
//显示当前页
pageNav.pHtml2 = function(pageNo) {
    var H = " <span class='cPageNum'>" + pageNo + "</span> ";
    return H;
};
//输出页码,可根据需要重写此方法
pageNav.go = function(p, pn) {
    //$("#pageNav").html(this.nav(p,pn)); //如果使用jQuery可用此句
    document.getElementById("pageNav").innerHTML = this.nav(p, pn);
    if (this.fn != null) {
        this.fn(this.p, this.pn);
    };
};

see：

http://demo.jb51.net/js/2014/pagenav/