【转载】jquery插件--简单的分页插件

时间  2019-11-11
标签 转载 jquery 插件 简单 分页 栏目 JQuery 繁體版
原文   原文链接

 

         jquery提供很方法的js插件开发函数，关于jquery插件的开发教程，能够参考博主的上一篇博文《jQuery插件开发精品教程》，这里就再也不重复。javascript

         因为项目中常常会使用到分页显示列表数据，这里就会用到关于一组分页按钮，以前的分页按钮是经过jsp的自定义标签来实现的一组分页按钮，关于jsp的自定义标签流程，能够参考《周记（jsp自定义标签）》。接触了jquery插件开发后，觉的js插件，无论是使用仍是管理，或者是二次开发，都比jsp的自定义标签使用起来方便，这里就经过js的插件形势编写分页按钮组。css

具体js插件代码以下：html

 

[javascript]  view plain  copy
 
 在CODE上查看代码片派生到个人代码片
  1. ;(function($,window,document,undefined){  
  2.     //自定义对象构造器  
  3.     var SimplePaging = function(ele,opt){  
  4.         this.$element = ele;  
  5.         this.defaults = {  
  6.             'test':"aaa",  
  7.             //必须参数  
  8.             'cPage':1,  //当前页码  
  9.             'tPage':1,  //总页数  
  10.             'clickFun':null,  //点击调用的函数名  
  11.             //可选参数  
  12.             'space':10,  //页面间距  
  13.             'showLast':true,  //是否显示第一页和最后页按钮组       true为显示  
  14.             'showNext':true,  //是否显示下一页和上一页按钮组   true为显示  
  15.             'div':{  
  16.                 'float':'right',  
  17.                 'font-size':'14px',               
  18.                 '-moz-user-select': 'none',  
  19.                 '-webkit-user-select':'none',  
  20.                 '-ms-user-select':'none',  
  21.                 '-khtml-user-select':'none',  
  22.                 'user-select':'none'  
  23.             },  
  24.             'btn':{  
  25.                 'display':'inline-block',  
  26.                 'position': 'relative',  
  27.                 'padding':'0 5px',  
  28.                 'letter-spacing':'0px',  
  29.                 'cursor':'pointer',  
  30.             },  
  31.             'btnOver':{  
  32.                 'top':'-1px',  
  33.             },  
  34.             'btnOut':{  
  35.                 'top':'0px',  
  36.             },  
  37.             'btnAction':{  
  38.                 'display':'inline-block',  
  39.                 'position': 'relative',  
  40.                 'padding':'0 5px',  
  41.                 'letter-spacing':'0px',  
  42.                 'color':'#EA8010',                
  43.                 'top':'-1px',  
  44.                 'cursor':'default',  
  45.             },  
  46.         };  
  47.         this.options = $.extend({},this.defaults,opt);  
  48.     };  
  49.       
  50.     //自定义对象方法  
  51.     SimplePaging.prototype = {  
  52.         test:function(){  
  53.             this.$element.html(this.options.test);  
  54.             return this.$element;  
  55.         },  
  56.         writePageBtn:function(){   //   1  10  20  30 31 32 33 34 35 36 37 38 39 40 50 60 ...  
  57.             var cPage = this.options.cPage;  
  58.             var tPage = this.options.tPage;  
  59.             var space = this.options.space;  
  60.             var funName = this.options.clickFun;  
  61.             var c = Math.ceil(cPage/space);  
  62.             //var l = Math.ceil(tPage/space);  
  63.             var id = this.$element.prop("id");  
  64.             var pageDiv = '';  
  65.             //第一页  
  66.             if(this.options.showLast){  
  67.                 pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="'+funName+'(1)">|<</span>';  
  68.             }  
  69.             //上一页  
  70.             if(this.options.showNext){  
  71.                 if(cPage>1){  
  72.                     pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="'+funName+'('+(cPage-1)+')"><<</span>';  
  73.                 }else{  
  74.                     pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="javascript:confirm(\'当前已为第一页\');"><<</span>';  
  75.                 }  
  76.             }  
  77.             //前期页区间前部分  
  78.             for(var i=1;i<c;i++){  
  79.                 pageDiv = pageDiv +  '<span class="pageSpan_'+id+'" onclick="'+funName+'('+(i*space)+')">'+(i*space)+'</span>';   
  80.             }  
  81.             //当前页区间部分  
  82.             for(var i=(c-1)*space+1;i<=c*space&&i<=tPage;i++){  
  83.                 //i = (i==0)?1:i;  //i=0时从1开始  
  84.                 if(cPage==i){  
  85.                     pageDiv = pageDiv +  '<span class="actionPageSpan_'+id+'">'+i+'</span>';  
  86.                 }else{  
  87.                     pageDiv = pageDiv +  '<span class="pageSpan_'+id+'" onclick="'+funName+'('+i+')">'+i+'</span>';   
  88.                 }  
  89.             }  
  90.             //当前页区间后部分  
  91.             for(var i=c+1;i*space<=tPage;i++){  
  92.                 pageDiv = pageDiv +  '<span class="pageSpan_'+id+'" onclick="'+funName+'('+(i*space)+')">'+(i*space)+'</span>';  
  93.             }  
  94.             //下一页  
  95.             if(this.options.showNext){  
  96.                 if(cPage<tPage){  
  97.                     pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="'+funName+'('+(cPage+1)+')">>></span>';  
  98.                 }else{  
  99.                     pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="javascript:confirm(\'当前已为最后一页\');">>></span>';  
  100.                 }  
  101.             }  
  102.             //最后页  
  103.             if(this.options.showLast){  
  104.                 pageDiv = pageDiv + '<span class="pageSpan_'+id+'" onclick="'+funName+'('+tPage+')">>|</span>';    
  105.             }  
  106.             this.$element.html(pageDiv);  
  107.               
  108.             //设置相关样式  
  109.             var div = $.extend({},this.defaults.div,this.options.div);  
  110.             this.$element.css(div);  
  111.             var btn = $.extend({},this.defaults.btn,this.options.btn);  
  112.             this.$element.find(".pageSpan_"+id).css(btn);  
  113.             var obj = this;  
  114.             this.$element.find(".pageSpan_"+id).hover(function(){  
  115.                 var btnOver =  $.extend({},obj.defaults.btnOver,obj.options.btnOver);  
  116.                 $(this).css(btnOver);  
  117.             },function(){  
  118.                 var btnOut =  $.extend({},obj.defaults.btnOut,obj.options.btnOut);  
  119.                 $(this).css(btnOut);  
  120.             });  
  121.             this.$element.find(".actionPageSpan_"+id).css(this.options.btnAction);  
  122.         }  
  123.     };  
  124.       
  125.     //添加插件到jQuery  
  126.     $.fn.simplePaging = function(options){  
  127.         var simplePaging = new SimplePaging(this,options);  
  128.         return simplePaging.writePageBtn();  
  129.     };  
  130.       
  131. })(jQuery,window,document);  

 

注意：该js插件是基于jquery开发的，使用时需先导入jqueryjava

 

简单使用代码：jquery

[html]  view plain  copy
 
 在CODE上查看代码片派生到个人代码片
  1. <html>  
  2. <script src="jquery-1.10.2.js" ></script>  
  3. <script src="simplePaging.js"></script>  
  4. <script type="text/javascript">  
  5.       
  6. function load(){  
  7.     var param = {  
  8.         "cPage":1,  
  9.         "tPage":54,  
  10.         "clickFun":"test",  //该函数接受一个cPage参数  
  11.         "showLast":false,  
  12.         "div":{"float":"left"}  
  13.     };  
  14.     $("#testDiv").simplePaging(param);  
  15. }  
  16.   
  17. function test(cPage){  
  18.    //业务代码块  
  19.   
  20.   //分页按钮组控制块  
  21.     var param = {  
  22.         "cPage":cPage,  
  23.         "tPage":54,  
  24.         "clickFun":"test",  
  25.         "showLast":false,  
  26.         "div":{"float":"left"}  
  27.     };  
  28.     $("#testDiv").simplePaging(param);  
  29. }  
  30.   
  31. </script>  
  32. <body onload="load()">  
  33. <div id="testDiv">  
  34.     <!-- 分页标签按钮 -->  
  35. </div>  
  36. </body>  
  37. </html>  

效果：web

 

插件参数说明：jquery插件

  1. this.defaults = {  
  2.             'test':"aaa",  //开发测试参数，无任何意义  
  3.             //必须参数  
  4.             'cPage':1,  //显示的当前页码  
  5.             'tPage':1,  //显示的总页数  
  6.             'clickFun':null,  //点击页码调用的函数名，该函数默认接受一个cPage参数  
  7.             //可选参数  
  8.             'space':10,  //隐藏页码的间距  
  9.             'showLast':true,  //是否显示第一页和最后页按钮组  true为显示  
  10.             'showNext':true,  //是否显示下一页和上一页按钮组  true为显示  
  11.             'div':{ },  //分页按钮组div的css样式  
  12.             'btn':{ },  //分页按钮组div中的页码按钮的css样式  
  13.             'btnOver':{ },  //鼠标浮在页码按钮上是页码按钮的css样式  
  14.             'btnOut':{ },  //鼠标离开页码按钮后页码按钮的css样式  
  15.             'btnAction':{},  //当前页码按钮的页码css样式  
  16.         };  
  17. //该参数为默认参数，能够根据须要二次开发，自定义参数  

实际项目中的效果图jsp

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程