首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

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

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

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

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
表单切换，用回车键替换Tab健(不支持IE)
Jul 20 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
在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
AE3805(1) 美国购物网站(1542) 英国购物网站(954) SLi Minor 2020(63) CPU(2) 爱尔兰购物网站(30) 天梯图(1) 新加坡购物网站(41) 香港购物网站(84) 巴西购物网站(71)
You might like
php目录操作实例代码
2014/02/21 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python入门篇之对象类型
2014/10/17 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
python实现录音功能（可随时停止录音）
2020/10/26 Python
HTML5进阶段内联标签汇总（小篇）
2016/07/13 HTML / CSS
Philosophy美国官网：美国美容品牌
2016/08/15 全球购物
美国紧身牛仔裤品牌：NYDJ
2017/05/24 全球购物
Otel.com：折扣酒店预订
2017/08/24 全球购物
Tommy Hilfiger澳洲官网：美国高端休闲领导品牌
2020/12/16 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
公司离职证明范本
2014/10/17 职场文书
导游词400字
2015/02/13 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python