Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > JS Tutorial > jquery css3 creates an ajax paging plug-in (self-written)_jquery

jquery css3 creates an ajax paging plug-in (self-written)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release： 2016-05-16 16:43:52
Original
1504 people have browsed it

Recently, the company’s projects have changed many paginations to ajax front-end pagination
The paging plug-in I wrote before was not easy to use, so I rewrote it

Supports IE6, but no animation effect
If there is no hard demand, I personally think there is no need to write more js to implement animation in these browsers
The animation of css3 is originally designed to help us replace this part of the animation code in js
Make js more pure to implement logic

The rendering is as follows:

The calling code is as follows:

Includes commonly used loading failure retries, parameters can be configured to allow manual input of page numbers, set the number of buttons, can call multiple pages, etc. The calling code is very simple

<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>
Copy after login

Specific 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)
Copy after login

Style 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;}
}
Copy after login

Both the style and animation can be modified by yourself (well, the animation effect is very simple, why bother, you have obviously been thinking about it for a long time, okay)

There is not too much other processing in the pageChange event. For example, our company has a set of solutions for processing json in the front and backend, and the parameters submitted by ajax are also processed

So if necessary, you can add another layer of encapsulation to my code

In addition, there are only a few methods exposed in the plug-in for now, and more may be added depending on the situation

Code download (you need to write your own backend query code): Here

Related labels：
css3 jquery
Previous article：jquery method to get the absolute position and relative position of html elements_jquery Next article：jQuery.lazyload masonry improved picture waterfall flow code_image special effects
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Import jQuery files
From 1970-01-01 08:00:00
0
0
0
javascript - Using jquery in vue fails. It can be used when jquery is introduced, but the plug-in that introduces jquery is not defined? ?
From 1970-01-01 08:00:00
0
0
0
thinkphp3.2.3+jquery hidden problems
From 1970-01-01 08:00:00
0
0
0
Where can I download jquery notes?
From 1970-01-01 08:00:00
0
0
0
php+jquery problem
From 1970-01-01 08:00:00
0
0
0
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template