jquery css3创建了一个ajax分页插件(自编写)

最近公司的项目把很多分页改成了ajax的前台分页。之前写的分页插件不好用，重写一个。

我支持IE6，但是没有动画效果。如果没有硬需求的话，我个人认为没有必要再为动画写更多的js来实现这些浏览器中的css3动画，这是帮助我们在js中替换这部分动画代码，让js实现逻辑更加纯粹。

效果图如下：

通话代码如下：

包括常用的加载失败重试，参数可以配置是否可以手动输入页码，按钮数量可以设置，可以调用多个页面等。并且调用代码非常简单。

脚本类型=' text/JavaScript ' var k page；$(function(){ to count()；});函数计数(){//initialize $。Ajax({ URL : '/service/db count '，type:' post '，success 3360 function(e){ kpa ge=$(' # div page ')。页面({datacount3360e，pagechange33660)。} });}函数topage(i，s) {//数据查询$('#divInfo ')。html('正在加载.');$.ajax({ url: '/Service/List '，type: 'post '，data: { PageSize: s，PageIndex: i }，success:函数(r) { $('#tList ')。html(r)；$('#divInfo ')。html(“”)；}，error : function(){ $(' # divinfo ')。html('加载失败.a href=' JavaScript : reload()；请重试/href’)；} });}函数reload(){ kpa ge . reload()；}/脚本特定的jquery.kun_page.js:

/* jquery。Kun _ page。jslxk 2014.06.16www.cnblogs.com/wingkun-参数配置：数据计数：数据总数页面大小：页数据条数maxButton:页码按钮数目showCustom:是否能手动输入页码pageChange:页变更事件参数：(国际，s，c)i:页面索引，当前页s 3360页面大小，页数据条数c :页数，总页数*/(函数($){$.fn.page=函数(配置){ if (this.length！=1) { throw 'k_page:如有多个页，面，张，版请调用多次!'；} var默认值={ dataCount: 1，pageSize: 10，maxButton: 6，showCustom: true，pageChange: null }配置=$ .扩展（默认，配置);if(配置。MaxButton=1)配置。maxButton=2；if(配置。page SiZe 1)配置。页面大小=1；//按钮数目需偶数if (config.maxButton % 2！=0)配置。MaxButtonvar pageIndex=1，pageCount，move _ kf//初始化页数函数init count(){页数=配置。datacount % config。页面大小==0？配置。数据计数/配置。页面大小： parseInt(配置。数据计数/配置。页面大小)1；}初始化计数()；var prev='上一页，下一个='下一页，pbody=$(' ')，pcustom=$('到第页确定)，cl=' '，pipt=$(' ')；this.empty().addClass('kun_page ').追加（前一个);pipt.keypress(函数(e){ if(e . what==13){ topage('确定');返回false} })。appendo(PC custom。儿童())；if(配置。换页){这个。解除绑定(点击).bind('click '，function(e){ var _ t=$(e . target)；if (_t[0]).标记名=='DIV' _t[0].类名！=' Kun _ page '){ topage(_ t . text())；} });} //跳转页码函数topage(text) { switch (text) { case '上一页： if(页面索引-1 1){ return；} PageIndex-；move _ kf=' sc _ r打破；案例下一页： if(页索引1页数){ return} pageIndexmove _ kf=' sc _ l打破；案例确定： if(！/^\d美元.测试(pipt。val())){ pipt。val(')；返回；} text=ParSeint(pipt。val())；if(text 1 | | text页数){ pipt。val(“”)；返回；}默认值： var _ pindex=ParSeint(文本)；if (pageIndex==_pindex)返回；move_kf=pageIndex _pindex？sc _ l ' : ' sc _ rpageIndex=_ pindex打破；} gopageChange()；} //页变更事件函数gopageChange(){ if(config。页面更改){ if(config。数据计数！=0){ config。页面更改(页面索引、config.pageSize、页面计数)；结束加载()；} } } //异步加载结束函数end loading(){ init page()；} //添加页码函数init page(){ pbody。empty()；var _ t _ maxb=config。MaxButton/2；//前后页码集合var _t_listp=[]，_ t _ listn=[]；var _min=0，_ max=page count FOr(var I=1；I=_ t _ maxbi){ var _ t _ prev=page index-I，_ t _ next=page index I；//当前页码之前的页if(_ t _ prev 0){ _ t _ listp。push(' _ t _ prev ' ')；if(I==_ t _ maxb)_ min=_ t _ prev；} //当前页码之后的页if(_ t _ next=页数){ _ t _ listn。push(' _ t _ next ' ')；if(I==_ t _ maxb)_ max=_ t _ next；} } //显示第一页if(_ min 1)Pb body。追加(' 1 ')；//显示前…… if (_min - 1 1) pbody.append('.');for(var I=_ t _ listp。长度；I=0；我-){ pbody。追加(_ t _ listp[I])；} pbody。追加(“‘页面索引’)；for(var I=0；长度；I){ pbody。追加(_ t _ listn[I])；} //显示后……if(页数-_ max 1)Pb body。追加('.');//显示最后一页if(_最大页数)pbody。追加('页数' ')；} init page()；gopageChange()；this.append(pbody ).追加（下一步);if(配置。显示自定义)这一点。追加(PC自定义)；这个。追加(cl)；返回{重新加载： gopageChange，页面计数：页面计数，调用：函数(e){//重新计算页数配置。data count=e；页面索引=1；初始化计数()；init page()；gopageChange()；} };//控制台。log(_ min ' * ' max ' * '页数)；}})(jQuery)样式kun_page.css:

/* Kun _ page。CSS lxk 2014。06 .16 www.cnblogs.com/wingkun*/.kun_page { font-size : 12px；线高：23 px字体系列： '微软雅黑；}.kun_page .k _ p _ page {位置：相对；}.kun_page div {float:左侧；余量： 3px border 3360固体1px # ccccursor:指针；颜色： # 333最小宽度：12 px文本对齐：居中；padding:0px 5px }。kun _ page em { display:块；向左浮动：margin: 2px}。kun_page .k _ p _ current {后台： # CCCcolor: # fff-web套件-动画：s croll _ b 300 msanimation:scroll _ b 300ms}。kun_page .k_cl {clear:两者；浮动：无；border:无；余量： 0pxpadding: 0px宽度：0 px高度：0px}。kun_page .k _ custom {显示：块；向左浮动：margin: 3px 3px。kun_page .k _ ipt { width : 30px h8 : 21 pxborder :固体1px # ccc文本对齐：中心；垂直对齐：毫米；}.kun_page .k _ m { opa city 3360 0；宽度： 1%;高度： 1%;top:0pxleft:0px显示：块；绝对位置：}.kun_page .sc _ l {背景：-网络套件-渐变(线性，0 100%,100% 100%,从(#CCCCCC)到(# 645 F5F))；-web套件-transform : translate(-50px)；-网络套件-动画：s croll _ k _ l 300 ms线性；背景：-moz-线性梯度（左，#CCCCCC 0%，# 645 F5F 100%)；背景：毫秒线性梯度（左，#CCCCCC 0%，# 645 F5F 100%)；transform : translate(-50px)；animation:scroll _ k _ l 300ms线性；}.kun_page .sc _ r {背景：-网络套件-渐变(线性，0 100%,100% 100%,从(#645F5F)到(# CCCCCC))；-web套件-transform : translate(50px)；-网络套件-动画：s croll _ k _ r 300 ms线性；背景：-moz-线性-渐变（左，#645F5F 0%，# CCCCCC 100%)；背景：毫秒线性梯度（左，#CCCCCC 0%，# 645 F5F 100%)；transform : translate(50px)；animation:scroll _ k _ r 300ms线性；}/*动画*/@-网络套件-关键帧scroll _ k _ l { 0% {-web kit-transform : translate(-100px)；opacity:0.2宽度：200%;高度：100%;} 99% {-web kit-transform : translate(-20px)；opacity:0宽度：200%;高度：100%;} 100% {-web kit-transform : translate(-20px)；opacity:0宽度：1%;高：1%;} } @-网络工具包-关键帧scroll _ k _ r { 0% {-web kit-transform : translate(100px)；opacity:0.2宽度：200%;高度：100%;} 99% {-web kit-transform : translate(20px)；opacity:0宽度：200%;高度：100%;} 100% {-web kit-transform : translate(20px)；opacity:0宽度：1%;高：1%;} } @关键帧scroll _ k _ l { 0% { transform : translate(-100px)；opacity:0.2宽度：200%;高度：100%;} 99% { transform : translate(-20px)；opacity:0宽度：200%;高度：100%;} 100% { transform : translate(-20px)；opacity:0宽度：1%;高：1%;} } @关键帧scroll _ k _ r { 0% { transform : translate(100px)；opacity:0.2宽度：200%;高度：100%;} 99% { transform : translate(20px)；opacity:0宽度：200%;高度：100%;} 100% { transform : translate(20px)；opacity:0宽度：1%;高：1%;} } @-网络工具包-关键帧scroll_b{0%，99% { background : # fff；color : # 000 } 100% { background : # CCC；color: # fff} } @关键帧scroll_b{0%，99% { background : # fff；color : # 000 } 100% { background : # CCC；color: # fff}}样式和动画都可以自己修改（好吧，动画效果很朴素，闹哪样，明明想了很久好吗)

页面更改事件里面也没有过多的其他处理，比如我们公司前后台处理json就有一套方案，ajax提交的参数也有处理

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

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

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