基于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 Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
全面理解闭包机制
Jul 11 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
vue生命周期实例小结
Aug 15 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 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
You might like
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
python实现获取序列中最小的几个元素
2014/09/25 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python中自定义函数的教程
2015/04/27 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
Python异常处理机制结构实例解析
2020/07/23 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
我爱幼儿园演讲稿
2014/09/11 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
授权委托书
2015/01/28 职场文书
指导老师鉴定意见
2015/06/05 职场文书
天堂的孩子观后感
2015/06/11 职场文书
红楼梦读书笔记
2015/06/25 职场文书
保护环境的宣传语
2015/07/13 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书