快捷導(dǎo)航

原生javascript實(shí)現(xiàn)的分頁(yè)插件pagenav

更新時(shí)間：2014年08月28日 09:18:57 投稿：hebedich

這幾天要做一個(gè)前臺(tái)頁(yè)面,涉及到分頁(yè),不想自己去寫所以在網(wǎng)上找jquery看有沒(méi)有好用一點(diǎn)的分頁(yè)組件,結(jié)果發(fā)現(xiàn)有很多,但是都很麻煩,看到了這個(gè)叫pagenav的發(fā)現(xiàn)相對(duì)來(lái)說(shuō)還是很容易上手的,于是就直接用了,在我看來(lái),能解決問(wèn)題的辦法就是好辦法.越簡(jiǎn)單越好.

這一款是用原生javascript實(shí)現(xiàn)的分頁(yè)插件pagenav，頁(yè)碼顯示jquery插件,只需要存在#pageNav,則會(huì)在其中顯示頁(yè)碼，調(diào)用時(shí)可根據(jù)需要先重寫go方法.(已去除jquery依賴)。。。。

插件代碼如下：

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

 頁(yè)碼顯示jquery插件,只需要存在#pageNav,則會(huì)在其中顯示頁(yè)碼.
 調(diào)用時(shí)可根據(jù)需要先重寫go方法.(已去除jquery依賴)

 **************************
 示例(注意：頁(yè)面中放置id為pageNav的html對(duì)象):

 //轉(zhuǎn)到頁(yè)碼時(shí)觸發(fā)的自定義方法,p為當(dāng)前頁(yè)碼,pn為總頁(yè)數(shù)
 pageNav.fn = function(p,pn){
 alert(p+","+pn);
 };
 //初始跳到第3頁(yè),共33頁(yè)
 pageNav.go(3,33);

 */
var pageNav = pageNav || {};
pageNav.fn = null;
//p為當(dāng)前頁(yè)碼,pn為總頁(yè)數(shù)
pageNav.nav = function(p, pn) {
  //只有一頁(yè),直接顯示1
  if (pn <= 1) {
    this.p = 1;
    this.pn = 1;
    return this.pHtml2(1);
  }
  if (pn < p) {
    p = pn;
  };
  var re = "";
  //第一頁(yè)
  if (p <= 1) {
    p = 1;
  } else {
    //非第一頁(yè)
    re += this.pHtml(p - 1, pn, "上一頁(yè)");
    //總是顯示第一頁(yè)頁(yè)碼
    re += this.pHtml(1, pn, "1");
  }
  //校正頁(yè)碼
  this.p = p;
  this.pn = pn;

  //開(kāi)始頁(yè)碼
  var start = 2;
  var end = (pn < 9) ? pn: 9;
  //是否顯示前置省略號(hào),即大于10的開(kāi)始頁(yè)碼
  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 += "...";
    //顯示最后一頁(yè)頁(yè)碼,如不需要?jiǎng)t去掉下面這一句
    re += this.pHtml(pn, pn);
  };
  if (p < pn) {
    re += this.pHtml(p + 1, pn, "下一頁(yè)");
  };
  return re;
};
//顯示非當(dāng)前頁(yè)
pageNav.pHtml = function(pageNo, pn, showPageNo) {
  showPageNo = showPageNo || pageNo;
  var H = " <a href='javascript:pageNav.go(" + pageNo + "," + pn + ");' class='pageNum'>" + showPageNo + "</a> ";
  return H;

};
//顯示當(dāng)前頁(yè)
pageNav.pHtml2 = function(pageNo) {
  var H = " <span class='cPageNum'>" + pageNo + "</span> ";
  return H;
};
//輸出頁(yè)碼,可根據(jù)需要重寫此方法
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);
  };
};

效果如下：