jquery+css3打造一款ajax分页插件(自写)


Posted in Javascript onJune 18, 2014

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

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

效果图如下:
jquery+css3打造一款ajax分页插件(自写)
调用代码如下:

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

<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>

具体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 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提交的参数也有处理

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

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

代码下载(后台查询代码需要自己写一个):这里

Javascript 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
bootstrap css样式之表单
Jan 19 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
vuex与组件联合使用的方法
May 10 Javascript
JS实现简单日历特效
Jan 03 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
在JavaScript中判断整型的N种方法示例介绍
Jun 18 #Javascript
input标签内容改变的触发事件介绍
Jun 18 #Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 #Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 #Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 #Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 #Javascript
js调试系列 控制台命令行API使用方法
Jun 18 #Javascript
You might like
isset和empty的区别
2007/01/15 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
python实现中文分词FMM算法实例
2015/07/10 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
python中map的基本用法示例
2018/09/10 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
党员年度个人总结
2015/02/14 职场文书
企业投资意向书
2015/05/09 职场文书
结婚仪式主持词
2015/06/29 职场文书
2016继续教育研修日志
2015/11/13 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Java 多线程并发FutureTask
2022/06/28 Java/Android