欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery+css3打造一款ajax分页插件

程序员文章站 2022-06-20 16:25:21
最近公司的项目将好多分页改成了ajax的前台分页 以前写的分页插件就不好用了,遂重写一个 支持ie6+,但没有动画效果 如果没有硬需求,个人认为没必要多写js让动画在这些中实...

最近公司的项目将好多分页改成了ajax的前台分页
以前写的分页插件就不好用了,遂重写一个

支持ie6+,但没有动画效果
如果没有硬需求,个人认为没必要多写js让动画在这些中实现
css3的动画本来就是帮我们取代js中这部分动画代码的
使js更纯粹地去实现逻辑

调用代码如下:

包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便

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

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

 function tocount() {
  //初始化
  $.ajax({ url: "/service/dbcount", type: "post", success: function (e) {
   kpage = $("#ppage").page({ datacount: e, pagechange: topage });
  }
  });
 }

 function topage(i, s) {
  //数据查询
  $("#pinfo").html("加载中...");
  $.ajax({ url: "/service/list", type: "post", data: { pagesize: s, pageindex: i }, success: function (r) {
   $("#tlist").html(r);
   $("#pinfo").html("");
  }, error: function () {
   $("#pinfo").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

---------------------------------
参数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 ? 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()); } }); } //跳转页码 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(); } } } //异步加载结束 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("

" + _t_prev + "

"); if (i == _t_maxb) _min = _t_prev; } //当前页码之后的页 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) { //重新计算页数 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 p {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提交的参数也有处理

所以若有需求,完全可以在我的代码上再封装一层

另外插件内公开的方法暂只有几个,可视情况增加