mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

css3制作一款ajax分页插件

时间:2019-08-17 02:34来源:www.mg4377.com
多年来集团的花色将广大分页改成了ajax的前台分页 以前写的分页插件就不好用了,遂重写贰个 近年集团的品种将过多分页改成了ajax的前台分页 初阶写的分页插件就不佳用了,遂重写

多年来集团的花色将广大分页改成了ajax的前台分页
以前写的分页插件就不好用了,遂重写贰个

近年集团的品种将过多分页改成了ajax的前台分页
初阶写的分页插件就不佳用了,遂重写一个

支撑IE6 ,但尚无动画效果
若无硬须求,个人以为没供给多写js让动画片在这么些浏览器中贯彻
css3的卡通片本来正是帮大家代表js中那部分动画代码的
使js更加纯粹地去落实逻辑

支持IE6 ,但从没动画效果
一旦未有硬供给,个人以为没须要多写js让动画在那个浏览器中落到实处
css3的动画片本来正是帮大家代表js中那有些动画片代码的
使js更加纯粹地去落实逻辑

功能图如下:

作用图如下:
图片 1
调用代码如下:

 图片 2

席卷常用的加载失利重试,参数可安插是不是能手动输入页码,设置按键数目,能够调用八个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>

回顾常用的加载退步重试,参数可安插是不是能手动输入页码,设置按键数目,能够调用多少个page等等,调用代码很方便

具体jquery.kun_page.js:

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

具体jquery.kun_page.js:

/*
 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;}
}

图片 3/* jquery.kun_page.js lxk 贰零壹肆.06.16 www.cnblogs.com/wingkun --------------------------------- 参数config: dataCount:数据总量pageSize:页数据条数 maxButton:页码开关数目 showCustom:是或不是能手动输入页码 pageChange:页更换事件 参数:(i,s,c) i:pageIndex,当前页 s:pageSize,页数据条数 c:pageCount,总页数 *css3制作一款ajax分页插件。/ (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 = "<div class='k_p_prev'><i></i>上一页</div>", next = "<div class='k_p_next'>下一页<i></i></div>", pbody = $("<span style='display:block;float:left;overflow:hidden;'></span>"), pcustom = $("<span class='k_custom'>到第 <span></span> 页 </span><div class='k_btn'>确定</div>"), cl = "<div class='k_cl'></div>", pipt = $("<input class='k_ipt'>"); 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("<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

体制和动画片都得以友善修改(好呢,动画效果很俭朴,闹哪样,明明想了十分久好啊)

  • "<i class='k_m " move_kf "'></i></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) View Code

pageChange事件里面也尚未过多的别样管理,比方大家商家前后台管理json就有一套方案,ajax提交的参数也可以有管理

编辑:www.mg4377.com 本文来源:css3制作一款ajax分页插件

关键词: