jquery+css3打造一款ajax分頁插件(自寫)

更新時間：2014年06月18日 17:08:45 投稿：whsnow

這篇文章主要介紹了自己寫的一款ajax分頁插件，用jquery+css3打造支持IE6+，但沒有動畫效果,需要的朋友可以參考下

最近公司的項目將好多分頁改成了ajax的前臺分頁
以前寫的分頁插件就不好用了，遂重寫一個

支持IE6+，但沒有動畫效果
如果沒有硬需求，個人認(rèn)為沒必要多寫js讓動畫在這些瀏覽器中實現(xiàn)
css3的動畫本來就是幫我們?nèi)〈鷍s中這部分動畫代碼的
使js更純粹地去實現(xiàn)邏輯

效果圖如下：

調(diào)用代碼如下：

包括常用的加載失敗重試，參數(shù)可配置是否能手動輸入頁碼，設(shè)置按鈕數(shù)目，可以調(diào)用多個page等等，調(diào)用代碼很簡便

<script type="text/javascript">
 var kpage;

 $(function () {
  tocount();
 });

 function tocount() {
  //初始化
  $.ajax({ url: "/Service/DBCount", type: "post", success: function (e) {
   kpage = $("#divPage").page({ dataCount: e, pageChange: topage });
  }
  });
 }

 function topage(i, s) {
  //數(shù)據(jù)查詢
  $("#divInfo").html("加載中...");
  $.ajax({ url: "/Service/List", type: "post", data: { PageSize: s, PageIndex: i }, success: function (r) {
   $("#tList").html(r);
   $("#divInfo").html("");
  }, error: function () {
   $("#divInfo").html("加載失敗...<a href='javascript:reload();'>重試</href>");
  }
  });
 }

 function reload() {
  kpage.reload();
 }

</script>

具體jquery.kun_page.js：

/*
jquery.kun_page.js
lxk 2014.06.16
www.cnblogs.com/wingkun

---------------------------------
參數(shù)config:

dataCount:數(shù)據(jù)總數(shù)

pageSize:頁數(shù)據(jù)條數(shù)

maxButton:頁碼按鈕數(shù)目
 
showCustom:是否能手動輸入頁碼 

pageChange:頁變更事件
參數(shù)：(i,s,c)
i:pageIndex,當(dāng)前頁
s:pageSize,頁數(shù)據(jù)條數(shù)
c:pageCount,總頁數(shù)

*/

(function($){

$.fn.page = function (config) {

 if (this.length != 1) {
  throw "k_page:如有多個page請調(diào)用多次!";
 }

 
 var defaults = { dataCount: 1, pageSize: 10, maxButton: 6, showCustom: true, pageChange: null }
 config = $.extend(defaults, config);

 if (config.maxButton <= 1) config.maxButton = 2;
 if (config.pageSize < 1) config.pageSize = 1;
 //按鈕數(shù)目需偶數(shù)
 if (config.maxButton % 2 != 0)
  config.maxButton++;

 var pageIndex = 1, pageCount, move_kf;

 //初始化頁數(shù)
 function initcount() {
  pageCount = config.dataCount % config.pageSize == 0 ? config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1;
 }
 initcount();

 var prev = "上一頁
", next = "下一頁
", pbody = $(""), pcustom = $("到第  頁 確定
"), cl = "
", pipt = $("");
 this.empty().addClass("kun_page").append(prev);
 pipt.keypress(function (e) {
  if (e.which == 13) {
   topage("確定");
   return false;
  }
 }).appendTo(pcustom.children());

 if (config.pageChange) {
  this.unbind("click").bind("click", function (e) {
   var _t = $(e.target);
   if (_t[0].tagName == "DIV" && _t[0].className != "kun_page") {
    topage(_t.text());
   }
  });
 }

 //跳轉(zhuǎn)頁碼
 function topage(text) {

  switch (text) {
   case "上一頁":
    if (pageIndex - 1 < 1) {
     return;
    }
    pageIndex--;
    move_kf = "sc_r";
    break;
   case "下一頁":
    if (pageIndex + 1 > pageCount) {
     return;
    }
    pageIndex++;
    move_kf = "sc_l";
    break;
   case "確定":

    if (!/^\d+$/.test(pipt.val())) {
     pipt.val("");
     return;
    }
    text = parseInt(pipt.val());
    if (text < 1 || text > pageCount) {
     pipt.val("");
     return;
    }

   default:
    var _pindex = parseInt(text);
    if (pageIndex == _pindex)
     return;
    move_kf = pageIndex < _pindex ? "sc_l" : "sc_r";
    pageIndex = _pindex;
    break;
  }

  gopageChange();
 }

 //頁變更事件
 function gopageChange() {
  if (config.pageChange) {
   if (config.dataCount != 0) {
    config.pageChange(pageIndex, config.pageSize, pageCount);
    endloading();
   }
  }
 }

 //異步加載結(jié)束
 function endloading() {
  initpage();

 }

 //添加頁碼
 function initpage() {
  pbody.empty();
  var _t_maxb = config.maxButton / 2;
  //前后頁碼集合
  var _t_listp = [], _t_listn = [];
  var _min = 0, _max = pageCount;

  for (var i = 1; i <= _t_maxb; i++) {
   var _t_prev = pageIndex - i, _t_next = pageIndex + i;
   //當(dāng)前頁碼之前的頁
   if (_t_prev > 0) {
    _t_listp.push("" + _t_prev + "");
    if (i == _t_maxb) _min = _t_prev;
   }
   //當(dāng)前頁碼之后的頁
   if (_t_next <= pageCount) {
    _t_listn.push("" + _t_next + "");
    if (i == _t_maxb) _max = _t_next;
   }
  }
  //顯示第一頁
  if (_min > 1) pbody.append("1");
  //顯示前 ……
  if (_min - 1 > 1) pbody.append("...");

  for (var i = _t_listp.length; i >= 0; i--) {
   pbody.append(_t_listp[i]);
  }

  pbody.append("" + pageIndex + "");

  for (var i = 0; i < _t_listn.length; i++) {
   pbody.append(_t_listn[i]);
  }

  //顯示后 ……
  if (pageCount - _max > 1) pbody.append("...");

  //顯示最后一頁
  if (_max < pageCount) pbody.append("" + pageCount + "");

 }

 initpage();
 gopageChange();

 this.append(pbody).append(next);
 if (config.showCustom)
  this.append(pcustom);
 this.append(cl);

 return { reload: gopageChange, pageCount: pageCount, recount: function (e) {
  //重新計算頁數(shù)
  config.dataCount = e;
  pageIndex = 1;
  initcount();
  initpage();
  gopageChange();
 }
 };

 //console.log(_min + "*" + _max + "*" + pageCount);
}


})(jQuery)

樣式kun_page.css：

/*
 kun_page.css
 lxk 2014.06.16
 www.cnblogs.com/wingkun
*/


.kun_page {font-size: 12px;line-height:23px;font-family:"Microsoft YaHei";}
.kun_page .k_p_page{position:relative;}
.kun_page div {float: left;margin: 3px;border: solid 1px #ccc;cursor: pointer;color: #333;min-width:12px;text-align:center;padding:0px 5px;}
.kun_page em {display: block;float: left;margin: 2px;}
.kun_page .k_p_current {background: #ccc;color: #fff;-webkit-animation:scroll_b 300ms;animation:scroll_b 300ms;}
.kun_page .k_cl {clear: both;float: none;border: none;margin: 0px;padding: 0px;width:0px;height:0px;}
.kun_page .k_custom {display: block;float: left;margin: 3px 3px 3px 20px;}
.kun_page .k_ipt {width: 30px;height: 21px;border: solid 1px #ccc;text-align: center;vertical-align:middle;}
.kun_page .k_m{ opacity: 0; width: 1%; height: 1%;top:0px;left:0px; display:block; position: absolute; }
.kun_page .sc_l{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#CCCCCC), to(#645F5F));
 -webkit-transform:translate(-50px);-webkit-animation:scroll_k_l 300ms linear;
 background: -moz-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);
 background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);
 transform:translate(-50px);animation:scroll_k_l 300ms linear;
 
 }
.kun_page .sc_r{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#645F5F), to(#CCCCCC));
 -webkit-transform:translate(50px); -webkit-animation:scroll_k_r 300ms linear;
 background: -moz-linear-gradient(left, #645F5F 0%, #CCCCCC 100%);
 background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);
 transform:translate(50px); animation:scroll_k_r 300ms linear;
 }

/*
animation
*/

@-webkit-keyframes scroll_k_l{
0%{-webkit-transform:translate(-100px);opacity:0.2;width:200%;height:100%;}
99%{-webkit-transform:translate(-20px);opacity:0;width:200%;height:100%;}
100%{-webkit-transform:translate(-20px);opacity:0;width:1%;height:1%;}
}

@-webkit-keyframes scroll_k_r{
0%{-webkit-transform:translate(100px);opacity:0.2;width:200%;height:100%;}
99%{-webkit-transform:translate(20px);opacity:0;width:200%;height:100%;}
100%{-webkit-transform:translate(20px);opacity:0;width:1%;height:1%;}
}

@keyframes scroll_k_l{
0%{transform:translate(-100px);opacity:0.2;width:200%;height:100%;}
99%{transform:translate(-20px);opacity:0;width:200%;height:100%;}
100%{transform:translate(-20px);opacity:0;width:1%;height:1%;}
}

@keyframes scroll_k_r{
0%{transform:translate(100px);opacity:0.2;width:200%;height:100%;}
99%{transform:translate(20px);opacity:0;width:200%;height:100%;}
100%{transform:translate(20px);opacity:0;width:1%;height:1%;}
}


@-webkit-keyframes scroll_b{
0%,99%{background: #fff;color: #000;}
100%{background: #ccc;color: #fff;}
}
@keyframes scroll_b{
0%,99%{background: #fff;color: #000;}
100%{background: #ccc;color: #fff;}
}

樣式和動畫都可以自己修改(好吧，動畫效果很樸素，鬧哪樣，明明想了很久好嗎)

pageChange事件里面也沒有過多的其他處理，比如我們公司前后臺處理json就有一套方案，ajax提交的參數(shù)也有處理

所以若有需求，完全可以在我的代碼上再封裝一層

另外插件內(nèi)公開的方法暫只有幾個，可視情況增加

代碼下載(后臺查詢代碼需要自己寫一個)：這里

您可能感興趣的文章: