基于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压缩工具:X2JSCompactor
Jun 13 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
浅析php单例模式
2014/11/25 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
python音频处理的示例详解
2020/12/23 Python
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
高级工程师岗位职责
2013/12/15 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
服务标语大全
2014/06/18 职场文书
会计出纳岗位职责
2015/03/31 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
收银员岗位职责范本
2015/04/07 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书