jquery css3 erstellt ein Ajax-Paging-Plug-in (selbst geschrieben)_jquery

Vor kurzem haben die Projekte des Unternehmens viele Paginierungen auf Ajax-Frontend-Paginierung umgestellt
Das Paging-Plugin, das ich zuvor geschrieben habe, war nicht einfach zu verwenden, deshalb habe ich es neu geschrieben

Unterstützt IE6, aber keinen Animationseffekt
Wenn es keine starke Nachfrage gibt, denke ich persönlich, dass es nicht nötig ist, mehr JS zu schreiben, um Animationen in diesen Browsern zu implementieren
Die Animation von CSS3 wurde ursprünglich entwickelt, um uns dabei zu helfen, diesen Teil des Animationscodes in js zu ersetzen
Machen Sie js reiner, um Logik zu implementieren

Die Darstellung ist wie folgt:

Der Aufrufcode lautet wie folgt:

Beinhaltet häufig verwendete Wiederholungsversuche bei Ladefehlern, Parameter können so konfiguriert werden, dass die manuelle Eingabe von Seitenzahlen möglich ist, die Anzahl der Schaltflächen festgelegt wird, mehrere Seiten aufgerufen werden können usw. Der Aufrufcode ist sehr einfach

<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) {
  //数据查询
  $("#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>

Spezifische jquery.kun_page.js:

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

---------------------------------
参数config:

dataCount:数据总数

pageSize:页数据条数

maxButton:页码按钮数目
 
showCustom:是否能手动输入页码 

pageChange:页变更事件
参数：(i,s,c)
i:pageIndex,当前页
s:pageSize,页数据条数
c:pageCount,总页数

*/

(function($){

$.fn.page = function (config) {

 if (this.length != 1) {
  throw "k_page:如有多个page请调用多次!";
 }

 
 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;
 //按钮数目需偶数
 if (config.maxButton % 2 != 0)
  config.maxButton++;

 var pageIndex = 1, pageCount, move_kf;

 //初始化页数
 function initcount() {
  pageCount = config.dataCount % config.pageSize == 0 &#63; config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1;
 }
 initcount();

 var prev = "<div class="k_p_prev">上一页</div>", next = "<div class="k_p_next">下一页</div>", pbody = $(""), pcustom = $("<span class="k_custom">到第  页 </span><div class="k_btn">确定</div>"), cl = "<div class="k_cl"></div>", pipt = $("<input class="k_ipt" type="text" />");
 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());
   }
  });
 }

 //跳转页码
 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 &#63; "sc_l" : "sc_r";
    pageIndex = _pindex;
    break;
  }

  gopageChange();
 }

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

 //异步加载结束
 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;
   //当前页码之前的页
   if (_t_prev > 0) {
    _t_listp.push("<div class="k_p_page">" + _t_prev + "</div>");
    if (i == _t_maxb) _min = _t_prev;
   }
   //当前页码之后的页
   if (_t_next <= pageCount) {
    _t_listn.push("<div class="k_p_page">" + _t_next + "</div>");
    if (i == _t_maxb) _max = _t_next;
   }
  }
  //显示第一页
  if (_min > 1) pbody.append("<div class="k_p_page">1</div>");
  //显示前 ……
  if (_min - 1 > 1) pbody.append("<em>...</em>");

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

  pbody.append("<div class="k_p_page k_p_current">" + pageIndex + "</div>");

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

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

  //显示最后一页
  if (_max < pageCount) pbody.append("<div class="k_p_page">" + pageCount + "</div>");

 }

 initpage();
 gopageChange();

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

 return { reload: gopageChange, pageCount: pageCount, recount: function (e) {
  //重新计算页数
  config.dataCount = e;
  pageIndex = 1;
  initcount();
  initpage();
  gopageChange();
 }
 };

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


})(jQuery)

Stil 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;}
}

Sie können den Stil und die Animation selbst ändern (naja, der Animationseffekt ist sehr einfach, warum sich die Mühe machen, Sie haben offensichtlich schon lange darüber nachgedacht, okay)

Es gibt nicht allzu viele andere Verarbeitungen im pageChange-Ereignis. Beispielsweise verfügt unser Unternehmen über eine Reihe von Lösungen für die Verarbeitung von JSON im Front- und Backend, und die von Ajax übermittelten Parameter werden ebenfalls verarbeitet

Bei Bedarf können Sie meinem Code also eine weitere Kapselungsebene hinzufügen

Darüber hinaus sind im Plug-in derzeit nur wenige Methoden verfügbar, und je nach Situation können weitere hinzugefügt werden

Code-Download (der Hintergrundabfragecode muss selbst geschrieben werden): Hier