zoukankan      html  css  js  c++  java

  • 利用JQuery写一个简单的分页插件

    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. }  

     下面测试一下：

    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>  
  • 相关阅读:
    各种集群服务
    cdn
    网页请求的完整过程
    html
    ajax异步请求技术
    浅谈前端渲染与后端渲染的区别
    html与php
    Ubuntu安装anaconda3
    win10安装Ubuntu系统
    删除排序数组中的重复项
  • 原文地址：https://www.cnblogs.com/luluping/p/1439086.html
Copyright © 2011-2022 走看看