//分页算法逻辑，主要对分页进行逻辑运算，不做渲染，返回值为JSON function PageAlgorithm(pageNo,pageSize,count,showNum){ var data=""; if(pageNo==1){ data='{"algorithm":[{"text":"上一页","num":0,"status":"disabled"}'; }else{ data='{"algorithm":[{"text":"上一页","num":"'+(pageNo-1)+'","status":"abled"}'; } //判断分页类型 if(count>showNum){ if(pageNo<=showNum+2){ //判断pageNo是否在要初始化显示的页码内 if(pageNo<=showNum){ for(var i=1;i<=showNum;i++){ if(pageNo==i){ data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; }else{ data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; } } if(pageNo==showNum){ data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; } }else{ for(var i=1;i<=pageNo;i++){ if(i==pageNo){ data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; }else{ data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; } } if(pageNo!=count){ data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; } } //选中最后一页时，将省略号隐藏 if(pageNo!=count){ if(pageNo!=(count-1)){ data+=',{"text":"…","num":"more","status":""}'; } } }else if(pageNo>count-showNum){ data+=',{"text":"1","num":"1","status":"abled"}'; data+=',{"text":"2","num":"2","status":"abled"}'; data+=',{"text":"…","num":"more","status":"disabled"}'; for(var i=count-showNum+1;i<=count;i++){ if(pageNo==i){ data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; }else{ data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; } } } else{ data+=',{"text":"1","num":"1","status":"abled"}'; data+=',{"text":"2","num":"2","status":"abled"}'; data+=',{"text":"…","num":"more","status":"disabled"}'; for(var i=pageNo-2;i<=pageNo+2;i++){ if(i==pageNo){ data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; }else{ data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; } } data+=',{"text":"…","num":"more","status":"disabled"}'; } }else{ for(var i=1;i<=count;i++){ if(pageNo==i){ data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; }else{ data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; } } } if(pageNo==count){ data+=',{"text":"下一页","num":"'+(pageNo+1)+'","status":"disabled"}]}'; }else{ data+=',{"text":"下一页","num":"'+(pageNo+1)+'","status":"abled"}]}'; } var json_return = JSON.parse(data); return json_return; }
注：不必关注里面的JSON最终要呈现的格式，主要的原因是这些参数最终是要传递到下一个方法中去渲染分页控件，而这些相当于是在两个方法中约定的，我们主要要关注的是怎样对分页控件进行类型上的区别，从而渲染出不同的JSON数据
五、jPage.js插件说明
这一款插件就是本次教程的一个最终的产物，这一款插件在实现方案上面是仿照淘宝的逻辑，但是由于公司的主营业务与淘宝的业务上面有些区别，所以样式风格不太一致。但是也是能够很好的满足一般业务上面常见的需求。
具体怎么使用，我们来举个例子
我们要得到这样的一个分页控件，总数据为70条，每页显示3条数据，并且要显示拓展部分，我们只需要如下这样去调用就行了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div></div> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/jPage.js"></script> <script type="text/javascript"> $("#test").page({count:70,pageSize:3,skipPart:true}); </script> </body> </html>
最终的效果如下：
这个简单吧大家。接下来福利来了，这款插件是开源的，不用998，免费带回家(要的请往下看)。
六、插件下载
由于篇幅有限，所以插件的更多用法没法在文中体现，但是为了各位同学可以更好的学习使用这一款插件，在这里为大家提供了比较详细的文档说明。并且下载的版本相当于1.0版本。后期如果时间允许的话会对这款插件做一个持续的版本迭代。下载地址，如果觉得好的话，请为这个插件点赞。
以上所述是小编给大家介绍的基于Bootstrap仿淘宝分页控件实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: