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

<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.jslxk 2014.06.16www.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 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;}}