基于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 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 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
PHP输入流php://input介绍
2012/09/18 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
Python中删除文件的程序代码
2011/03/13 Python
python实现自动更换ip的方法
2015/05/05 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python实现大学人员管理系统
2019/10/25 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
单位考核聘任报告
2015/03/02 职场文书
学校捐书倡议书
2015/04/27 职场文书
2019各种保证书范文
2019/06/24 职场文书
创业计划书之家教托管
2019/09/25 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python