zoukankan      html  css  js  c++  java

  • JQuery写的一个简单的分页插件-2

    扩展jQuery很容易，作为一个练习，编写一个简单的分页插件，代码量不大，直接看代码好了：

    Js代码 复制代码
    1. $.fn.mypagination = function(totalProperty,opts){  
    2.     opts = $.extend({  
    3.         perPage:10,  
    4.    
    5.         callback:function(){  
    6.         }  
    7.     },opts||{});  
    8.           
    9.     return this.each(function(){  
    10.         function numPages(){  
    11.             return Math.ceil(totalProperty/opts.perPage);  
    12.         }  
    13.    
    14.           
    15.         function selectPage(page){  
    16.             return function(){  
    17.                 currPage = page;  
    18.                 if (page<0) currPage = 0;  
    19.                 if (page>=numPages()) currPage = numPages()-1;  
    20.                 render();  
    21.    
    22.                 $('img.page-wait',panel).attr('src','images/wait.gif');  
    23.                 opts.callback(currPage+1);  
    24.                 $('img.page-wait',panel).attr('src','images/nowait.gif');  
    25.             }  
    26.         }  
    27.           
    28.         function render(){  
    29.    
    30.             var html = '<table><tbody><tr>'   
    31.                 +'<td><a href="#"><img class="page-first"></a></td>'  
    32.                 +'<td><a href="#"><img class="page-prev"></a></td>'  
    33.                 +'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>'  
    34.                 +'<td><a href="#"><img class="page-next"></a></td>'  
    35.                 +'<td><a href="#"><img class="page-last"></a></td>'  
    36.                 +'<td><img src="images/nowait.gif" class="page-wait"></td>'  
    37.                 +'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>'  
    38.                 +'</tr></tbody></table>';  
    39.             var imgFirst = 'images/page-first-disabled.gif';  
    40.             var imgPrev = 'images/page-prev-disabled.gif';  
    41.             var imgNext = 'images/page-next-disabled.gif';  
    42.             var imgLast = 'images/page-last-disabled.gif';  
    43.             if (currPage > 0){  
    44.                 imgFirst = 'images/page-first.gif';  
    45.                 imgPrev = 'images/page-prev.gif';  
    46.             }  
    47.             if (currPage < numPages()-1){  
    48.                 imgNext = 'images/page-next.gif';  
    49.                 imgLast = 'images/page-last.gif';  
    50.             }  
    51.             panel.empty();  
    52.             panel.append(html);  
    53.             $('img.page-first',panel)  
    54.                 .bind('click',selectPage(0))  
    55.                 .attr('src',imgFirst);    
    56.             $('img.page-prev',panel)  
    57.                 .bind('click',selectPage(currPage-1))  
    58.                 .attr('src',imgPrev);     
    59.             $('img.page-next',panel)  
    60.                 .bind('click',selectPage(currPage+1))  
    61.                 .attr('src',imgNext);     
    62.             $('img.page-last',panel)  
    63.                 .bind('click',selectPage(numPages()-1))  
    64.                 .attr('src',imgLast);  
    65.             $('input.page-num',panel)  
    66.                 .val(currPage+1)  
    67.                 .change(function(){  
    68.                     selectPage($(this).val()-1)();  
    69.                 });  
    70.         }  
    71.           
    72.         var currPage = 0;  
    73.         var panel = $(this);  
    74.         render();  
    75.    
    76.     });  
    77. }  
    [js] view plain copy
    1. <br>  

     下面测试一下：

    Html代码 复制代码
    1. <head>  
    2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    3.     <link rel="stylesheet" href="mypagination.css"/>  
    4.     <script type="text/javascript" src="jquery-1.2.6.js"></script>  
    5.     <script type="text/javascript" src="jquery.mypagination.js"></script>  
    6.     <script>  
    7.         $(document).ready(function(){  
    8.             $('#mypage').mypagination(10112,{  
    9.                 callback:function(page){  
    10.                     alert(page);  
    11.                 }  
    12.             });  
    13.         });  
    14.     </script>  
    15. </head>  
    16. <div id="mypage" class="mypagination"></div>
     
    顶
    0
    踩
    0
  • 相关阅读:
    vs2008.net多语言实现方法
    C#中 Process的扩展类ProcessExtensions
    C#获取当前系统信息的类
    非常好用的GridView控件yyControls中的SmartGridView
    Android提供两个常用的消息弹出框【Toast和Alert】
    [置顶] Asp.net中实现多语言的Page的扩展的基类
    C# word类库
    在系统出现未处理的错误时，在Global的Application_Error记录下错误
    向大家推荐一个非常好用的JS日历控件My97DatePicker
    网页代码测试工具集合
  • 原文地址：https://www.cnblogs.com/wanzhongjun/p/6786469.html
Copyright © 2011-2022 走看看