基于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编写分页插件

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

Javascript 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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
You might like
URL Rewrite的设置方法
2007/01/02 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
php编写简单的文章发布程序
2015/06/18 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
python装饰器decorator介绍
2014/11/21 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python如何将多个PDF进行合并
2019/08/13 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
护理见习报告范文
2014/11/03 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
Python 中的Sympy详细使用
2021/08/07 Python