js分页插件

分页插件一：

效果如图：

 

这一款是用原生javascript实现的分页插件pagenav，页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码，调用时可根据需要先重写go方法.(已去除jquery依赖)。。。。

/*
 **************************
 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);
    };
};

效果如图：

插件二：

 

使用说明
需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1)

素材准备
分页器CSS样式文件，可复制如下CSS样式，可命名为Pager.css

#pager ul.pages {
 display:block;
 border:none;
 text-transform:uppercase;
 font-size:10px;
 margin:10px 0 50px;
 padding:0;
}
#pager ul.pages li {
 list-style:none;
 float:left;
 border:1px solid #ccc;
 text-decoration:none;
 margin:0 5px 0 0;
 padding:5px;
 }
 #pager ul.pages li:hover {
 border:1px solid #003f7e;
 }
 #pager ul.pages li.pgEmpty {
 border:1px solid #eee;
 color:#eee;
 }
 #pager ul.pages li.pgCurrent {
 border:1px solid #003f7e;
 color:#000;
 font-weight:700;
 background-color:#eee;
 }
实例代码
一，包含文件部分

 <link href=”Pager.css” rel=”stylesheet” type=”text/css” />
 <script src=”jquery.js” type=”text/javascript”></script>
 <script src=”jquery.pager.js” type=”text/javascript”></script>
一个CSS样式文件，二个JS库文件。

二，HTML部分(分页器显示div)

 <h1 id=”result”>必优博客 jQuery分页器 </h1>
 <div id=”pager” ></div>
三，javascript部分(jQuery插件JQuery Pager分页器调用)

 <script type=”text/javascript” language=”javascript”>
  $(document).ready(function() {
  $(”#pager“).pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });
  });
  PageClick = function(pageclickednumber) {
  $(”#pager“).pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick
  });
  $(”#result“).html(”必优博客 jQuery分页器 当前第” + pageclickednumber + “页”);
  }
 </script>
四，javascript代码(JQuery Pager调用)分析
(1)$(”#pager”).pager({});部分
pagenumber，表示初始页数，如：1
pagecount，表示总页数，如：15
buttonClickCallback，表示点击分页数按钮调用的方法，如：PageClick

(2)PageClick = function(pageclickednumber) {}部分
PageClick，表示自定义点击分页数时的function方法，如：function(pageclickednumber){}

jQuery插件JQuery Pager分页器只需要起始页数pagenumber，最大页数pagecount，点击页数时的调用buttonClickCallback的 function方法就可实现javascript分页功能，实际应用中只需对PageClick方法进行简单修改就可使用，如将pagenumber和 pagecount设为变量，可通过GET的方法进行页数值传递，JQuery Pager就可实现javascript分页功能，其它可自行扩展，同时可对jQuery插件JQuery Pager分页器buttonClickCallback方法实现丰富的动态效果，供参考。

 

 

效果如图：