jquery+css3打造一款ajax分页插件（自写）

最近公司的项目将好多分页改成了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 = $（"#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.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：

/* 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提交的参数也有处理
所以若有需求，完全可以在我的代码上再封装一层
另外插件内公开的方法暂只有几个，可视情况增加
代码下载（后台查询代码需要自己写一个）：这里