编程 Javascript

基于jquery编写分页插件

Posted in Javascript onMarch 07, 2016

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

$.fn.mypagination = function(totalProperty,opts){ 
  opts = $.extend({ 
    perPage:10, 
  
    callback:function(){ 
    } 
  },opts||{}); 
     
  return this.each(function(){ 
    function numPages(){ 
      return Math.ceil(totalProperty/opts.perPage); 
    } 
  
     
    function selectPage(page){ 
      return function(){ 
        currPage = page; 
        if (page<0) currPage = 0; 
        if (page>=numPages()) currPage = numPages()-1; 
        render(); 
  
        $('img.page-wait',panel).attr('src','images/wait.gif'); 
        opts.callback(currPage+1); 
        $('img.page-wait',panel).attr('src','images/nowait.gif'); 
      } 
    } 
     
    function render(){ 
  
      var html = '<table><tbody><tr>'  
        +'<td><a href="#"><img class="page-first"></a></td>' 
        +'<td><a href="#"><img class="page-prev"></a></td>' 
        +'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>' 
        +'<td><a href="#"><img class="page-next"></a></td>' 
        +'<td><a href="#"><img class="page-last"></a></td>' 
        +'<td><img src="images/nowait.gif" class="page-wait"></td>' 
        +'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>' 
        +'</tr></tbody></table>'; 
      var imgFirst = 'images/page-first-disabled.gif'; 
      var imgPrev = 'images/page-prev-disabled.gif'; 
      var imgNext = 'images/page-next-disabled.gif'; 
      var imgLast = 'images/page-last-disabled.gif'; 
      if (currPage > 0){ 
        imgFirst = 'images/page-first.gif'; 
        imgPrev = 'images/page-prev.gif'; 
      } 
      if (currPage < numPages()-1){ 
        imgNext = 'images/page-next.gif'; 
        imgLast = 'images/page-last.gif'; 
      } 
      panel.empty(); 
      panel.append(html); 
      $('img.page-first',panel) 
        .bind('click',selectPage(0)) 
        .attr('src',imgFirst);  
      $('img.page-prev',panel) 
        .bind('click',selectPage(currPage-1)) 
        .attr('src',imgPrev);   
      $('img.page-next',panel) 
        .bind('click',selectPage(currPage+1)) 
        .attr('src',imgNext);   
      $('img.page-last',panel) 
        .bind('click',selectPage(numPages()-1)) 
        .attr('src',imgLast); 
      $('input.page-num',panel) 
        .val(currPage+1) 
        .change(function(){ 
          selectPage($(this).val()-1)(); 
        }); 
    } 
     
    var currPage = 0; 
    var panel = $(this); 
    render(); 
  
  }); 
}

下面测试一下：

<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link rel="stylesheet" href="mypagination.css"/> 
  <script type="text/javascript" src="jquery-1.2.6.js"></script> 
  <script type="text/javascript" src="jquery.mypagination.js"></script> 
  <script> 
    $(document).ready(function(){ 
      $('#mypage').mypagination(10112,{ 
        callback:function(page){ 
          alert(page); 
        } 
      }); 
    }); 
  </script> 
</head> 
<div id="mypage" class="mypagination"></div>

运行效果图如下：

基于jquery编写分页插件

以上就是本文的全部内容，希望对大家的学习有所帮助。

基于jquery编写分页插件

- Author -

正文

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

HTTP状态代码以及定义（解释）

Feb 02 Javascript

JavaScript中的函数声明和函数表达式区别浅析

Mar 27 Javascript

jQuery实现左右切换焦点图

Apr 03 Javascript

js去字符串前后空格的实现方法

Feb 26 Javascript

微信小程序实现验证码获取倒计时效果

Feb 08 Javascript

node.js中TCP Socket多进程间的消息推送示例详解

Jul 10 Javascript

ES6 中可以提升幸福度的小功能

Aug 06 Javascript

全面解析vue router 基本使用(动态路由，嵌套路由)

Sep 02 Javascript

Vue 配合eiement动态路由,权限验证的方法

Sep 26 Javascript

Vue中的v-for指令不起效果的解决方法

Sep 27 Javascript

Vue开发之watch监听数组、对象、变量操作分析

Apr 25 Javascript

element-ui树形控件后台返回的数据+生成组织树的工具类

Mar 05 Javascript

JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招

Mar 07 #Javascript

javascript特殊日历控件分享

Mar 07 #Javascript

基于JavaScript实现快速转换文本语言（繁体中文和简体中文）

Mar 07 #Javascript

论JavaScript模块化编程

Mar 07 #Javascript

js日期插件dateHelp获取本月、三个月、今年的日期

Mar 07 #Javascript

不定义JQuery插件不要说会JQuery

Mar 07 #Javascript

javascript数组去重小结

Mar 07 #Javascript